CNN color palette
MediaCNN's color identity is defined by its iconic red, paired with a minimal palette of black, white, and neutral grays for clarity and authority. The palette is consistent across digital and broadcast platforms, supporting a strong, recognizable brand presence.
cnn.comCNN colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- CNN RedPrimary204, 0, 0
- CNN BlackSecondary0, 0, 0
- CNN Light GrayAccent230, 230, 230
Surfaces
Page, cards and dividers.- CNN WhiteBackground255, 255, 255
- CNN Off WhiteSurface245, 245, 245
- CNN Border GrayBorder217, 217, 217
Text
Three tiers of copy.- CNN Text BlackText18, 18, 18
- CNN Text GraySecondary text90, 90, 90
- CNN Muted GrayMuted text139, 139, 139
Semantic
Feedback and state colors.- CNN Success GreenSuccess46, 139, 87
- CNN Warning YellowWarning255, 179, 0
- CNN Error RedError184, 0, 0
- CNN Info BlueInfo33, 118, 174
Use CNN's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cnn-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2176AE;
--error: #B80000;
--accent: #E6E6E6;
--border: #D9D9D9;
--primary: #CC0000;
--success: #2E8B57;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #000000;
--text-muted: #8B8B8B;
--background: #FFFFFF;
--text-primary: #121212;
--text-secondary: #5A5A5A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
17.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
CNN gray and neutral colors
The quiet part of the CNN palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- CNN WhiteBackground
- HEX
- RGB
- HSL
- CNN Off WhiteSurface
- HEX
- RGB
- HSL
- CNN Border GrayBorder
- HEX
- RGB
- HSL
- CNN Text BlackText
- HEX
- RGB
- HSL
- CNN Text GraySecondary text
- HEX
- RGB
- HSL
- CNN Muted GrayMuted text
- HEX
- RGB
- HSL
About CNN's colors
CNN's palette centers on a vivid red, symbolizing urgency and importance, complemented by a monochromatic range for clarity. The restrained use of color supports a focus on content and credibility.
Primary red contrasts with black and white for maximum legibility.
Grays are used to create hierarchy and separation.
Accent colors are reserved for alerts and status messaging.
Psychology
Red communicates urgency, energy, and authority, aligning with CNN's role as a breaking news source. The neutral tones reinforce trust, seriousness, and readability.
Evolution
CNN's color palette has remained largely unchanged since its inception, maintaining consistency for brand recognition. Minor adjustments to gray tones and UI accents have occurred to improve digital accessibility.
Where CNN uses each color
- Primary
CNN Red is used for the logo, major headlines, and key action buttons.
- Secondary
CNN Black appears in navigation bars, footers, and background elements.
- Accent
CNN Light Gray is used for UI backgrounds, cards, and subtle dividers.
- Backgrounds
CNN White is the default background for articles and main content areas.
- Text
CNN Text Black and Gray are used for headlines, body copy, and metadata.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
CNN color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official CNN primary color hex code is #CC0000. This red is used for the logo and key brand elements.
CNN Red (#CC0000) is RGB(204, 0, 0) and CMYK(0, 100, 100, 20). These values ensure consistency across digital and print media.
CNN uses several grays: CNN Light Gray (#E6E6E6), Border Gray (#D9D9D9), Text Gray (#5A5A5A), and Muted Gray (#8B8B8B). These support the primary red and ensure readability in the UI.
Use CNN Red (#CC0000) for primary actions and branding, with black, white, and grays for structure and hierarchy. Reserve semantic colors for alerts and status messages to maintain clarity and brand consistency.
The secondary color is CNN Black, #000000, and the accent is CNN Light Gray, #E6E6E6. Together with the primary they make up the three brand colors at the top of this page.
6 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 CNN's colors consistently when it generates UI.
Make something in the spirit of CNN
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.