BuzzFeed color palette
MediaBuzzFeed's color identity is bold and energetic, anchored by its signature red. The palette supports high-contrast UI and clear content hierarchy across its digital platforms.
buzzfeed.comBuzzFeed colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- BuzzFeed RedPrimary238, 51, 34
- BuzzFeed CharcoalSecondary34, 34, 34
- BuzzFeed YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- BuzzFeed WhiteBackground255, 255, 255
- BuzzFeed Light GraySurface250, 250, 250
- BuzzFeed Border GrayBorder230, 230, 230
Text
Three tiers of copy.- BuzzFeed CharcoalText34, 34, 34
- BuzzFeed Medium GraySecondary text102, 102, 102
- BuzzFeed Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- BuzzFeed GreenSuccess0, 194, 122
- BuzzFeed OrangeWarning255, 153, 0
- BuzzFeed Error RedError215, 38, 61
- BuzzFeed BlueInfo0, 153, 255
Use BuzzFeed's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
buzzfeed-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #D7263D;
--accent: #FFD100;
--border: #E6E6E6;
--primary: #EE3322;
--success: #00C27A;
--surface: #FAFAFA;
--warning: #FF9900;
--secondary: #222222;
--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
15.2: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.5: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.7:1
Fail
BuzzFeed gray and neutral colors
The quiet part of the BuzzFeed palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- BuzzFeed WhiteBackground
- HEX
- RGB
- HSL
- BuzzFeed Light GraySurface
- HEX
- RGB
- HSL
- BuzzFeed Border GrayBorder
- HEX
- RGB
- HSL
- BuzzFeed CharcoalText
- HEX
- RGB
- HSL
- BuzzFeed Medium GraySecondary text
- HEX
- RGB
- HSL
- BuzzFeed Muted GrayMuted text
- HEX
- RGB
- HSL
About BuzzFeed's colors
BuzzFeed's palette is built around a vibrant red, supported by high-contrast neutrals and bright accents for clarity and energy. The color system is optimized for digital readability and brand recognition.
Primary red contrasts with white and dark gray for legibility.
Yellow accent highlights calls to action and interactive elements.
Neutral grays provide structure and hierarchy in layouts.
Psychology
The dominant red conveys urgency, excitement, and approachability, aligning with BuzzFeed's energetic content. Yellow adds a playful, inviting touch, while deep neutrals ground the experience.
Evolution
BuzzFeed's core red has remained consistent since its early years, ensuring strong brand recognition. The supporting palette has evolved to include more nuanced grays and accent colors for digital UI needs.
Where BuzzFeed uses each color
- Primary
BuzzFeed Red is used for the logo, primary buttons, and key highlights across the site.
- Secondary
BuzzFeed Charcoal appears in navigation bars, footers, and primary text.
- Accent
BuzzFeed Yellow is used for badges, notifications, and interactive highlights.
- Backgrounds
BuzzFeed White is the main background for articles and content areas, with Light Gray for cards and secondary surfaces.
- Text
Charcoal is used for headlines and body text, Medium Gray for subtext, and Muted Gray for metadata or disabled states.
- Semantic
Green, Orange, Red, and Blue are used for status indicators such as success messages, warnings, errors, and informational banners.
BuzzFeed color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official BuzzFeed primary color is #EE3322, known as BuzzFeed Red.
BuzzFeed Red (#EE3322) is RGB(238, 51, 34) and approximately CMYK(0, 79, 86, 7).
BuzzFeed uses Charcoal (#222222), Medium Gray (#666666), Muted Gray (#999999), and Border Gray (#E6E6E6) for text, backgrounds, and borders.
Use BuzzFeed Red (#EE3322) for primary actions and branding, with supporting neutrals and accents for UI structure and emphasis. Maintain high contrast for accessibility and brand consistency.
The secondary color is BuzzFeed Charcoal, #222222, and the accent is BuzzFeed Yellow, #FFD100. 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 BuzzFeed's colors consistently when it generates UI.
Make something in the spirit of BuzzFeed
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.