HuffPost color palette
MediaHuffPost's color identity is defined by its signature green, paired with dark backgrounds and neutral grays for a modern, readable news experience. The palette is simple and bold, supporting clarity and brand recognition.
huffpost.comHuffPost colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- HuffPost GreenPrimary22, 170, 96
- HuffPost BlackSecondary34, 34, 34
- HuffPost WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- HuffPost Dark BackgroundBackground24, 24, 24
- HuffPost Light SurfaceSurface247, 247, 247
- HuffPost Light BorderBorder224, 224, 224
Text
Three tiers of copy.- HuffPost HeadlineText34, 34, 34
- HuffPost Secondary TextSecondary text102, 102, 102
- HuffPost Muted TextMuted text153, 153, 153
Semantic
Feedback and state colors.- HuffPost Success GreenSuccess22, 170, 96
- HuffPost Warning YellowWarning255, 180, 0
- HuffPost Error RedError224, 32, 32
- HuffPost Info BlueInfo0, 153, 204
Use HuffPost's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
huffpost-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099CC;
--error: #E02020;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #16AA60;
--success: #16AA60;
--surface: #F7F7F7;
--warning: #FFB400;
--secondary: #222222;
--text-muted: #999999;
--background: #181818;
--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
1.1:1
Fail
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
5.4:1
Pass
Muted text on background
Needs 3:1 for large text
6.2:1
Pass
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
HuffPost gray, dark and neutral colors
HuffPost runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- HuffPost Dark BackgroundBackground
- HEX
- RGB
- HSL
- HuffPost Light SurfaceSurface
- HEX
- RGB
- HSL
- HuffPost Light BorderBorder
- HEX
- RGB
- HSL
- HuffPost HeadlineText
- HEX
- RGB
- HSL
- HuffPost Secondary TextSecondary text
- HEX
- RGB
- HSL
- HuffPost Muted TextMuted text
- HEX
- RGB
- HSL
About HuffPost's colors
HuffPost's palette centers on a vivid green, contrasted with deep blacks and neutral grays for clarity and accessibility. The restrained use of color emphasizes content and readability.
Primary green is used for brand and action elements.
Dark backgrounds create contrast with white and green.
Grays support hierarchy and subtlety in UI.
Psychology
The green conveys freshness, trust, and approachability, distinguishing HuffPost from traditional news outlets. Dark and neutral tones reinforce seriousness and readability.
Evolution
The green has remained consistent since HuffPost's 2017 rebrand, with only minor adjustments to supporting grays and backgrounds. The palette has been stable, focusing on simplicity and digital clarity.
Where HuffPost uses each color
- Primary
Used for logo, navigation highlights, and primary action buttons.
- Secondary
Applied to headlines, main text, and navigation backgrounds.
- Accent
Used for backgrounds, text, and to provide contrast in UI elements.
- Backgrounds
Dark backgrounds appear in headers, footers, and app screens.
- Text
Primary and secondary text colors are used for headlines, body text, and metadata.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
HuffPost color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official HuffPost brand color is #16AA60, known as HuffPost Green.
HuffPost Green (#16AA60) is RGB(22, 170, 96) and CMYK(87, 0, 44, 33).
HuffPost uses #222222 (HuffPost Black) and #181818 (HuffPost Dark Background) for dark UI areas, and #F7F7F7 (HuffPost Light Surface) for light backgrounds.
Use #16AA60 for branding and key actions, with dark and light neutrals (#222222, #F7F7F7) supporting readability and hierarchy. Semantic colors are reserved for alerts and status.
The secondary color is HuffPost Black, #222222, and the accent is HuffPost White, #FFFFFF. 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 HuffPost's colors consistently when it generates UI.
Make something in the spirit of HuffPost
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.