Cartoon Network color palette
MediaCartoon Network's color identity is defined by a bold, high-contrast black and white palette, accented by vibrant pink and blue. The brand uses these colors for a playful yet instantly recognizable visual style.
cartoonnetwork.comCartoon Network colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- CN BlackPrimary0, 0, 0
- CN WhiteSecondary255, 255, 255
- CN MagentaAccent255, 27, 238
Surfaces
Page, cards and dividers.- CN WhiteBackground255, 255, 255
- CN Light GraySurface242, 242, 242
- CN Border GrayBorder204, 204, 204
Text
Three tiers of copy.- CN BlackText0, 0, 0
- CN Dark GraySecondary text102, 102, 102
- CN Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- CN AquaSuccess0, 229, 200
- CN YellowWarning255, 214, 0
- CN RedError255, 23, 68
- CN BlueInfo0, 176, 255
Use Cartoon Network's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cartoon-network-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B0FF;
--error: #FF1744;
--accent: #FF1BEE;
--border: #CCCCCC;
--primary: #000000;
--success: #00E5C8;
--surface: #F2F2F2;
--warning: #FFD600;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #000000;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
18.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Cartoon Network gray and neutral colors
The quiet part of the Cartoon Network palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- CN WhiteBackground
- HEX
- RGB
- HSL
- CN Light GraySurface
- HEX
- RGB
- HSL
- CN Border GrayBorder
- HEX
- RGB
- HSL
- CN BlackText
- HEX
- RGB
- HSL
- CN Dark GraySecondary text
- HEX
- RGB
- HSL
- CN Muted GrayMuted text
- HEX
- RGB
- HSL
About Cartoon Network's colors
Cartoon Network's palette is built on stark black and white, with bright accent colors to convey energy and fun. The high contrast ensures strong brand recognition and accessibility.
Primary black and white are used in a checkerboard motif.
Accent colors like magenta and blue highlight calls to action.
Neutral grays provide balance for backgrounds and UI surfaces.
Psychology
The black and white scheme projects clarity and boldness, while the vibrant accents evoke creativity and excitement. Together, these colors appeal to both children and nostalgic adults.
Evolution
Cartoon Network's core black and white palette has remained consistent since its launch. Accent colors have evolved, with magenta and blue becoming more prominent in recent years.
Where Cartoon Network uses each color
- Primary
CN Black is used for the logo, navigation bars, and key text.
- Secondary
CN White serves as the main background and in the checkerboard logo.
- Accent
CN Magenta is used for buttons, highlights, and promotional graphics.
- Backgrounds
CN White and CN Light Gray are used for main content areas and UI surfaces.
- Text
CN Black is primary for headlines, with CN Dark Gray and CN Muted Gray for secondary and muted text.
- Semantic
CN Aqua, Yellow, Red, and Blue are used for status indicators and alerts across digital platforms.
Cartoon Network color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Cartoon Network brand color is black, with the hex code #000000.
The RGB value for CN Black is (0, 0, 0) and the CMYK is (0, 0, 0, 100).
Cartoon Network uses CN Light Gray (#F2F2F2), CN Border Gray (#CCCCCC), CN Dark Gray (#666666), and CN Muted Gray (#999999) for backgrounds, borders, and secondary text.
Use CN Black and CN White for core branding and layout, with accent colors like CN Magenta (#FF1BEE) and CN Blue (#00B0FF) for highlights and calls to action.
The secondary color is CN White, #FFFFFF, and the accent is CN Magenta, #FF1BEE. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Cartoon Network's colors consistently when it generates UI.
Make something in the spirit of Cartoon Network
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.