National Geographic color palette
MediaNational Geographic's color identity is defined by its iconic yellow, paired with a minimalist black, white, and gray palette for clarity and impact. The brand's colors are consistent across its print, digital, and broadcast media.
nationalgeographic.comNational Geographic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NatGeo YellowPrimary255, 204, 0
- NatGeo BlackSecondary0, 0, 0
- NatGeo WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- NatGeo Light GrayBackground247, 247, 247
- NatGeo Pale GraySurface229, 229, 229
- NatGeo Border GrayBorder204, 204, 204
Text
Three tiers of copy.- NatGeo CharcoalText34, 34, 34
- NatGeo Medium GraySecondary text102, 102, 102
- NatGeo Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- NatGeo Success GreenSuccess75, 181, 67
- NatGeo Warning AmberWarning255, 179, 0
- NatGeo Error RedError215, 38, 61
- NatGeo Info BlueInfo26, 115, 232
Use National Geographic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
national-geographic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A73E8;
--error: #D7263D;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #FFCC00;
--success: #4BB543;
--surface: #E5E5E5;
--warning: #FFB300;
--secondary: #000000;
--text-muted: #999999;
--background: #F7F7F7;
--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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
National Geographic gray and neutral colors
The quiet part of the National Geographic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NatGeo Light GrayBackground
- HEX
- RGB
- HSL
- NatGeo Pale GraySurface
- HEX
- RGB
- HSL
- NatGeo Border GrayBorder
- HEX
- RGB
- HSL
- NatGeo CharcoalText
- HEX
- RGB
- HSL
- NatGeo Medium GraySecondary text
- HEX
- RGB
- HSL
- NatGeo Muted GrayMuted text
- HEX
- RGB
- HSL
About National Geographic's colors
National Geographic's palette is anchored by a distinctive yellow, symbolizing exploration and optimism, balanced by black, white, and neutral grays for clarity and legibility. The simple color system reinforces the brand's authority and timelessness.
Primary yellow contrasts with deep black for maximum visibility.
Neutral grays support content and UI clarity.
Accent white provides space and highlights.
Psychology
The yellow evokes curiosity, warmth, and discovery, aligning with the brand's mission. Black and gray tones convey seriousness and professionalism.
Evolution
The yellow rectangle has been central to the brand since its inception, with the palette remaining largely unchanged. Minor adjustments to gray tones have been made for digital accessibility.
Where National Geographic uses each color
- Primary
NatGeo Yellow is used in the logo, navigation highlights, and key calls to action.
- Secondary
NatGeo Black is used for backgrounds, headers, and strong typographic elements.
- Accent
NatGeo White is used for backgrounds, negative space, and text on dark elements.
- Backgrounds
NatGeo Light Gray and Pale Gray are used for page backgrounds and content sections.
- Text
Charcoal, Medium Gray, and Muted Gray are used for primary, secondary, and muted text respectively.
- Semantic
Success Green, Warning Amber, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
National Geographic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official National Geographic brand color is NatGeo Yellow, with the hex code #FFCC00.
NatGeo Yellow (#FFCC00) is RGB(255, 204, 0) and CMYK(0, 20, 100, 0).
National Geographic uses several grays: Light Gray (#F7F7F7), Pale Gray (#E5E5E5), Border Gray (#CCCCCC), Medium Gray (#666666), and Muted Gray (#999999).
NatGeo Yellow should be reserved for highlights and the logo, while black, white, and grays structure backgrounds and text. Semantic colors are only for status or alerts, not for branding.
The secondary color is NatGeo Black, #000000, and the accent is NatGeo White, #FFFFFF. 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 National Geographic's colors consistently when it generates UI.
Make something in the spirit of National Geographic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.