BBC color palette
MediaBBC's color identity is defined by its signature black, white, and red palette, emphasizing clarity, authority, and neutrality. The brand uses a minimalistic approach with strong contrasts for maximum legibility.
bbc.comBBC colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- BBC BlackPrimary0, 0, 0
- BBC WhiteSecondary255, 255, 255
- BBC RedAccent184, 0, 0
Surfaces
Page, cards and dividers.- BBC Light GreyBackground245, 245, 245
- BBC Surface GreySurface229, 229, 229
- BBC Border GreyBorder204, 204, 204
Text
Three tiers of copy.- BBC Text BlackText0, 0, 0
- BBC Text GreySecondary text74, 74, 74
- BBC Muted GreyMuted text118, 118, 118
Semantic
Feedback and state colors.- BBC Success GreenSuccess52, 123, 20
- BBC Warning YellowWarning255, 185, 0
- BBC Error RedError184, 0, 0
- BBC Info BlueInfo0, 91, 193
Use BBC's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bbc-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005BC1;
--error: #B80000;
--accent: #B80000;
--border: #CCCCCC;
--primary: #000000;
--success: #347B14;
--surface: #E5E5E5;
--warning: #FFB900;
--secondary: #FFFFFF;
--text-muted: #767676;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #4A4A4A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.0:1
Pass
Muted text on background
Needs 3:1 for large text
4.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.6:1
Pass
BBC gray and neutral colors
The quiet part of the BBC palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- BBC Light GreyBackground
- HEX
- RGB
- HSL
- BBC Surface GreySurface
- HEX
- RGB
- HSL
- BBC Border GreyBorder
- HEX
- RGB
- HSL
- BBC Text BlackText
- HEX
- RGB
- HSL
- BBC Text GreySecondary text
- HEX
- RGB
- HSL
- BBC Muted GreyMuted text
- HEX
- RGB
- HSL
About BBC's colors
BBC's palette is built around high-contrast black, white, and red, ensuring strong visual impact and legibility. The use of neutral greys supports a clean, authoritative look.
Primary black and white create maximum contrast.
Red is used sparingly for emphasis and alerts.
Greys provide structure and subtlety in UI elements.
Psychology
Black conveys authority and seriousness, while red signals urgency and draws attention. The white and grey tones maintain neutrality and clarity, supporting BBC's reputation for impartial reporting.
Evolution
The BBC palette has remained largely consistent, with black and white always central to its identity. Red was introduced more prominently in the digital era for highlights and calls to action.
Where BBC uses each color
- Primary
BBC Black is used for the logo, navigation bars, and primary headings.
- Secondary
BBC White appears as the main background and text color for high contrast.
- Accent
BBC Red is reserved for highlights, notifications, and important buttons.
- Backgrounds
BBC Light Grey and Surface Grey are used for page backgrounds and content sections.
- Text
Text colors range from BBC Text Black for main content to BBC Muted Grey for secondary information.
- Semantic
Success, warning, error, and info colors are used in alerts, notifications, and status indicators across BBC digital products.
BBC color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary BBC brand color is black, with the hex code #000000.
BBC Black is #000000, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
BBC uses a range of greys including BBC Light Grey (#F5F5F5), Surface Grey (#E5E5E5), and Border Grey (#CCCCCC) for backgrounds and UI elements.
Use BBC Black and White for primary layouts and text, BBC Red for emphasis, and the grey tones for backgrounds and dividers. Semantic colors are reserved for alerts and status messaging.
The secondary color is BBC White, #FFFFFF, and the accent is BBC Red, #B80000. Together with the primary they make up the three brand colors at the top of this page.
6 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 BBC's colors consistently when it generates UI.
Make something in the spirit of BBC
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.