The Guardian color palette
MediaThe Guardian's color identity is defined by a deep blue primary, supported by a bold yellow accent and a range of neutral greys for clarity and readability. The palette is designed for strong visual hierarchy and accessibility across digital and print platforms.
theguardian.comThe Guardian colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Guardian BluePrimary5, 41, 98
- Guardian Mid BlueSecondary56, 88, 152
- Guardian YellowAccent255, 204, 0
Surfaces
Page, cards and dividers.- Guardian WhiteBackground255, 255, 255
- Guardian Light GreySurface246, 246, 246
- Guardian Border GreyBorder220, 220, 220
Text
Three tiers of copy.- Guardian BlackText18, 18, 18
- Guardian Secondary GreySecondary text118, 118, 118
- Guardian Muted GreyMuted text179, 179, 179
Semantic
Feedback and state colors.- Guardian GreenSuccess0, 131, 71
- Guardian OrangeWarning255, 153, 0
- Guardian RedError199, 0, 0
- Guardian Info BlueInfo50, 104, 168
Use The Guardian's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-guardian-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3268A8;
--error: #C70000;
--accent: #FFCC00;
--border: #DCDCDC;
--primary: #052962;
--success: #008347;
--surface: #F6F6F6;
--warning: #FF9900;
--secondary: #385898;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #121212;
--text-secondary: #767676;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
The Guardian gray and neutral colors
The quiet part of the The Guardian palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Guardian WhiteBackground
- HEX
- RGB
- HSL
- Guardian Light GreySurface
- HEX
- RGB
- HSL
- Guardian Border GreyBorder
- HEX
- RGB
- HSL
- Guardian BlackText
- HEX
- RGB
- HSL
- Guardian Secondary GreySecondary text
- HEX
- RGB
- HSL
- Guardian Muted GreyMuted text
- HEX
- RGB
- HSL
About The Guardian's colors
The Guardian's palette is anchored by a distinctive blue, contrasted with a vibrant yellow accent and supported by a range of neutral greys. This combination ensures both brand recognition and functional clarity across all media.
Primary blue contrasts with yellow accent for calls to action.
Neutral greys provide structure and legibility.
Secondary blue extends the brand's visual depth.
Psychology
The deep blue conveys trust, authority, and reliability, aligning with journalistic values. The yellow accent adds energy and draws attention to key elements.
Evolution
The Guardian's palette has remained consistent, with blue and yellow as core colors since its 2005 rebrand. Minor adjustments to grey tones and accent shades have improved digital accessibility.
Where The Guardian uses each color
- Primary
Guardian Blue is used for the masthead, navigation bars, and key brand elements.
- Secondary
Guardian Mid Blue appears in section headers and as a supporting color in graphics.
- Accent
Guardian Yellow is used for highlights, buttons, and subscription prompts.
- Backgrounds
Guardian White and Light Grey are used for page backgrounds and content areas.
- Text
Guardian Black is used for primary headlines and body text, with Secondary and Muted Greys for metadata and less prominent information.
- Semantic
Guardian Green, Orange, and Red are used for status indicators, alerts, and notifications.
The Guardian color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Guardian's official primary color is Guardian Blue, hex code #052962. This color is used for the masthead and key branding elements.
Guardian Blue (#052962) in RGB is (5, 41, 98). For CMYK, it is approximately (95, 58, 0, 62).
The Guardian uses Guardian Light Grey (#F6F6F6), Guardian Border Grey (#DCDCDC), Guardian Secondary Grey (#767676), and Guardian Muted Grey (#B3B3B3) for backgrounds, borders, and secondary text. These ensure readability and visual hierarchy.
Use Guardian Blue (#052962) for primary branding, Guardian Yellow (#FFCC00) for accents and calls to action, and the official greys for backgrounds and supporting UI elements. Always maintain sufficient contrast for accessibility.
The secondary color is Guardian Mid Blue, #385898, and the accent is Guardian Yellow, #FFCC00. 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 The Guardian's colors consistently when it generates UI.
Make something in the spirit of The Guardian
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.