CNBC color palette
MediaCNBC's color identity is defined by its signature peacock blue, complemented by a spectrum of accent colors and dark neutrals for UI clarity. The palette is vibrant yet professional, reflecting the network's dynamic financial news coverage.
cnbc.comCNBC colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- CNBC Peacock BluePrimary0, 85, 148
- CNBC CharcoalSecondary38, 38, 38
- CNBC OrangeAccent232, 128, 36
Surfaces
Page, cards and dividers.- CNBC Light GrayBackground245, 246, 250
- CNBC WhiteSurface255, 255, 255
- CNBC Divider GrayBorder217, 217, 217
Text
Three tiers of copy.- CNBC Charcoal TextText38, 38, 38
- CNBC Secondary GraySecondary text116, 116, 116
- CNBC Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- CNBC Market GreenSuccess0, 132, 86
- CNBC YellowWarning245, 197, 24
- CNBC Market RedError194, 0, 47
- CNBC Info BlueInfo0, 119, 194
Use CNBC's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cnbc-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077C2;
--error: #C2002F;
--accent: #E88024;
--border: #D9D9D9;
--primary: #005594;
--success: #008456;
--surface: #FFFFFF;
--warning: #F5C518;
--secondary: #262626;
--text-muted: #A6A6A6;
--background: #F5F6FA;
--text-primary: #262626;
--text-secondary: #747474;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
CNBC background, border and text colors
The quiet part of the CNBC palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- CNBC Light GrayBackground
- HEX
- RGB
- HSL
- CNBC WhiteSurface
- HEX
- RGB
- HSL
- CNBC Divider GrayBorder
- HEX
- RGB
- HSL
- CNBC Charcoal TextText
- HEX
- RGB
- HSL
- CNBC Secondary GraySecondary text
- HEX
- RGB
- HSL
- CNBC Muted GrayMuted text
- HEX
- RGB
- HSL
About CNBC's colors
CNBC's palette centers on a bold blue, supported by a range of vibrant accent colors and neutral grays for clarity. The colors are chosen for high contrast and legibility in financial data presentation.
Primary blue anchors the brand and is used in navigation and highlights.
Accent orange and yellow provide contrast for calls to action and alerts.
Neutral grays and white balance the vivid accents for a professional look.
Psychology
Blue conveys trust, stability, and professionalism, aligning with CNBC's financial news authority. Accent colors like orange and green signal energy, growth, and market movement.
Evolution
The core blue and neutral grays have remained consistent since CNBC's rebranding in the 2000s. Accent colors have been refined for digital clarity and accessibility.
Where CNBC uses each color
- Primary
CNBC Peacock Blue is used in the website header, navigation bar, and key highlights.
- Secondary
CNBC Charcoal appears in footers, sidebars, and as a background for widgets.
- Accent
CNBC Orange is used for buttons, links, and promotional banners.
- Backgrounds
CNBC Light Gray and White are used for page backgrounds and content areas.
- Text
Charcoal and Secondary Gray are used for primary and secondary text, ensuring readability.
- Semantic
Market Green and Market Red indicate financial gains and losses in charts and tickers.
CNBC color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official CNBC brand color is Peacock Blue, with the hex code #005594.
CNBC Peacock Blue (#005594) is RGB(0, 85, 148) and CMYK(100, 43, 0, 42).
CNBC uses Charcoal (#262626), Divider Gray (#D9D9D9), and Light Gray (#F5F6FA) for backgrounds, borders, and text.
Use Peacock Blue for navigation and highlights, neutrals for backgrounds and text, and accent colors for buttons, alerts, and market indicators. Always maintain sufficient contrast for accessibility.
The secondary color is CNBC Charcoal, #262626, and the accent is CNBC Orange, #E88024. 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 CNBC's colors consistently when it generates UI.
Make something in the spirit of CNBC
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.