NBC color palette
MediaNBC's color identity features a strong, dark primary tone complemented by the iconic multicolored peacock accent and a modern, neutral UI palette. The system balances vibrant branding with accessible, legible interface elements.
nbc.comNBC colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NBC CharcoalPrimary34, 34, 34
- NBC WhiteSecondary255, 255, 255
- NBC Peacock YellowAccent239, 185, 0
Surfaces
Page, cards and dividers.- NBC Light GrayBackground245, 245, 245
- NBC Surface GraySurface224, 224, 224
- NBC Divider GrayBorder204, 204, 204
Text
Three tiers of copy.- NBC Charcoal TextText34, 34, 34
- NBC Secondary GraySecondary text102, 102, 102
- NBC Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- NBC Peacock GreenSuccess67, 176, 42
- NBC Peacock YellowWarning239, 185, 0
- NBC Peacock RedError224, 26, 34
- NBC Peacock BlueInfo0, 137, 208
Use NBC's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nbc-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0089D0;
--error: #E01A22;
--accent: #EFB900;
--border: #CCCCCC;
--primary: #222222;
--success: #43B02A;
--surface: #E0E0E0;
--warning: #EFB900;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F5F5F5;
--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
14.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
NBC gray and neutral colors
The quiet part of the NBC palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NBC Light GrayBackground
- HEX
- RGB
- HSL
- NBC Surface GraySurface
- HEX
- RGB
- HSL
- NBC Divider GrayBorder
- HEX
- RGB
- HSL
- NBC Charcoal TextText
- HEX
- RGB
- HSL
- NBC Secondary GraySecondary text
- HEX
- RGB
- HSL
- NBC Muted GrayMuted text
- HEX
- RGB
- HSL
About NBC's colors
NBC's palette is anchored by a deep charcoal for clarity and contrast, with the vibrant peacock colors used for accents and highlights. The neutral grays provide a modern, accessible backdrop for content.
Primary charcoal contrasts with white and light gray backgrounds.
Peacock colors serve as accent and semantic highlights.
Neutral grays unify UI elements and text.
Psychology
The dark primary conveys authority and professionalism, while the peacock colors evoke diversity and energy. The palette is designed to be both trustworthy and visually engaging.
Evolution
NBC's core palette has remained stable, with the peacock colors being a longstanding brand signature. Recent updates have focused on refining neutral UI tones for digital accessibility.
Where NBC uses each color
- Primary
Used for navigation bars, headers, and primary buttons.
- Secondary
Applied to text, icons, and backgrounds for contrast.
- Accent
Highlights the peacock logo and key interactive elements.
- Backgrounds
Light gray backgrounds are used for content areas and cards.
- Text
Primary and secondary grays are used for body copy and metadata.
- Semantic
Peacock colors indicate status: green for success, yellow for warning, red for error, and blue for information.
NBC color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official NBC primary color hex code is #222222. This is used for main navigation and key UI elements.
NBC Charcoal (#222222) is RGB(34, 34, 34) and CMYK(0, 0, 0, 87). These values ensure consistency across digital and print.
NBC uses a range of grays including NBC Light Gray (#F5F5F5), NBC Surface Gray (#E0E0E0), and NBC Divider Gray (#CCCCCC) for backgrounds and borders. These provide clarity and separation in the interface.
Use NBC Charcoal (#222222) for primary navigation and text, peacock colors for accents and status, and neutral grays for backgrounds and surfaces. Always maintain sufficient contrast for accessibility.
The secondary color is NBC White, #FFFFFF, and the accent is NBC Peacock Yellow, #EFB900. 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 NBC's colors consistently when it generates UI.
Make something in the spirit of NBC
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.