NPR color palette
MediaNPR's color identity is defined by its iconic red, blue, and black, reflecting its recognizable logo and commitment to clear, trustworthy journalism. The palette is bold, minimal, and highly functional across digital and print media.
npr.orgNPR colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NPR RedPrimary214, 32, 42
- NPR BlackSecondary26, 26, 26
- NPR BlueAccent48, 118, 182
Surfaces
Page, cards and dividers.- NPR WhiteBackground255, 255, 255
- NPR Light GraySurface245, 245, 245
- NPR Border GrayBorder225, 225, 225
Text
Three tiers of copy.- NPR Text BlackText34, 34, 34
- NPR Text GraySecondary text102, 102, 102
- NPR Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- NPR Success GreenSuccess60, 179, 113
- NPR Warning OrangeWarning246, 166, 35
- NPR Error RedError214, 32, 42
- NPR Info BlueInfo48, 118, 182
Use NPR's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
npr-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3076B6;
--error: #D6202A;
--accent: #3076B6;
--border: #E1E1E1;
--primary: #D6202A;
--success: #3CB371;
--surface: #F5F5F5;
--warning: #F6A623;
--secondary: #1A1A1A;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #222222;
--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
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
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3: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.6:1
Fail
NPR gray and neutral colors
The quiet part of the NPR palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NPR WhiteBackground
- HEX
- RGB
- HSL
- NPR Light GraySurface
- HEX
- RGB
- HSL
- NPR Border GrayBorder
- HEX
- RGB
- HSL
- NPR Text BlackText
- HEX
- RGB
- HSL
- NPR Text GraySecondary text
- HEX
- RGB
- HSL
- NPR Muted GrayMuted text
- HEX
- RGB
- HSL
About NPR's colors
NPR's palette uses strong primary colors for brand recognition and clear communication. The combination of red, blue, and black provides contrast and authority.
Red and blue are used in the logo for immediate brand association.
Black and white provide a neutral foundation for content.
Grays are used for UI elements and text hierarchy.
Psychology
Red signals urgency and draws attention, while blue conveys trust and reliability. Black and gray tones reinforce professionalism and clarity.
Evolution
NPR's color palette has remained consistent, anchored by its logo colors since its inception. Minor adjustments have been made for digital accessibility and UI clarity.
Where NPR uses each color
- Primary
NPR Red is used in the logo, key buttons, and highlights.
- Secondary
NPR Black appears in the logo, headers, and navigation bars.
- Accent
NPR Blue is featured in the logo and for links or interactive elements.
- Backgrounds
NPR White and Light Gray are used for page backgrounds and cards.
- Text
Text Black and Text Gray are used for primary and secondary text throughout the site.
- Semantic
Success Green, Warning Orange, and Error Red are used for status messages and alerts.
NPR color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary NPR brand color is NPR Red, with the hex code #D6202A.
NPR Red (#D6202A) is RGB(214, 32, 42) and CMYK(0, 85, 80, 16).
NPR uses several grays, including NPR Light Gray (#F5F5F5), Border Gray (#E1E1E1), Text Gray (#666666), and Muted Gray (#999999) for backgrounds, borders, and text hierarchy.
Use NPR Red (#D6202A) and NPR Blue (#3076B6) for branding and calls to action, with black, white, and grays for backgrounds, surfaces, and text to maintain clarity and accessibility.
The secondary color is NPR Black, #1A1A1A, and the accent is NPR Blue, #3076B6. 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 NPR's colors consistently when it generates UI.
Make something in the spirit of NPR
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.