Politico color palette
MediaPolitico's color identity is defined by a bold, authoritative red paired with neutral grays and black, reflecting its focus on political news and analysis. The palette is minimal, emphasizing clarity and seriousness.
politico.comPolitico colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Politico RedPrimary233, 34, 40
- Politico BlackSecondary34, 34, 34
- Deep Politico RedAccent183, 28, 28
Surfaces
Page, cards and dividers.- Politico WhiteBackground255, 255, 255
- Politico Light GraySurface245, 245, 245
- Politico Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Politico BlackText34, 34, 34
- Politico Medium GraySecondary text117, 117, 117
- Politico Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Politico Success GreenSuccess56, 142, 60
- Politico Warning YellowWarning251, 192, 45
- Politico Error RedError211, 47, 47
- Politico Info BlueInfo25, 118, 210
Use Politico's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
politico-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #B71C1C;
--border: #E0E0E0;
--primary: #E92228;
--success: #388E3C;
--surface: #F5F5F5;
--warning: #FBC02D;
--secondary: #222222;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Politico gray and neutral colors
The quiet part of the Politico palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Politico WhiteBackground
- HEX
- RGB
- HSL
- Politico Light GraySurface
- HEX
- RGB
- HSL
- Politico Border GrayBorder
- HEX
- RGB
- HSL
- Politico BlackText
- HEX
- RGB
- HSL
- Politico Medium GraySecondary text
- HEX
- RGB
- HSL
- Politico Muted GrayMuted text
- HEX
- RGB
- HSL
About Politico's colors
Politico's palette uses a dominant red for brand recognition and urgency, balanced by neutral grays and white for readability. The restrained use of color supports a serious, journalistic tone.
Red contrasts sharply with white for high visibility.
Grays provide a neutral backdrop for content.
Accent red is used sparingly for emphasis.
Psychology
Red conveys urgency, authority, and energy, aligning with Politico's focus on breaking political news. The neutral tones reinforce trust and professionalism.
Evolution
Politico's color palette has remained largely consistent since its founding, with minor refinements to red and gray tones for digital clarity. The brand has maintained its signature red as the primary identifier.
Where Politico uses each color
- Primary
Politico Red is used in the logo, primary buttons, and key navigation highlights.
- Secondary
Politico Black appears in headers, navigation bars, and primary text.
- Accent
Deep Politico Red is used for hover states and important alerts.
- Backgrounds
Politico White and Light Gray are used for page backgrounds and content areas.
- Text
Politico Black is the main text color, with Medium and Muted Grays for secondary and tertiary text.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and informational badges.
Politico color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Politico brand color is #E92228, known as Politico Red.
Politico Red (#E92228) has an RGB value of 233, 34, 40 and a CMYK value of 0, 85, 83, 9.
Politico uses several grays: #222222 (Politico Black), #757575 (Medium Gray), #BDBDBD (Muted Gray), and #F5F5F5 (Light Gray) for backgrounds and text.
Use Politico Red (#E92228) for primary actions and branding, with grays and white for backgrounds and text. Accent and semantic colors are for alerts, statuses, and highlights.
The secondary color is Politico Black, #222222, and the accent is Deep Politico Red, #B71C1C. Together with the primary they make up the three brand colors at the top of this page.
3 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 Politico's colors consistently when it generates UI.
Make something in the spirit of Politico
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.