The Sun color palette
MediaThe Sun's brand identity is defined by its iconic, bold red and white palette, emphasizing urgency and immediacy. The color system is simple, direct, and highly recognizable across its print and digital platforms.
thesun.co.ukThe Sun colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- The Sun RedPrimary255, 32, 44
- The Sun WhiteSecondary255, 255, 255
- The Sun YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Sunlight GrayBackground248, 248, 248
- Newsprint GraySurface242, 242, 242
- Tabloid BorderBorder229, 229, 229
Text
Three tiers of copy.- Headline BlackText34, 34, 34
- Subhead GraySecondary text102, 102, 102
- Muted CaptionMuted text153, 153, 153
Semantic
Feedback and state colors.- Sun Success GreenSuccess67, 176, 71
- Sun Warning AmberWarning255, 184, 0
- Sun Error RedError208, 2, 27
- Sun Info BlueInfo0, 120, 215
Use The Sun's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-sun-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0078D7;
--error: #D0021B;
--accent: #FFD100;
--border: #E5E5E5;
--primary: #FF202C;
--success: #43B047;
--surface: #F2F2F2;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F8F8F8;
--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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2: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
5.1: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.5:1
Fail
The Sun gray and neutral colors
The quiet part of the The Sun palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sunlight GrayBackground
- HEX
- RGB
- HSL
- Newsprint GraySurface
- HEX
- RGB
- HSL
- Tabloid BorderBorder
- HEX
- RGB
- HSL
- Headline BlackText
- HEX
- RGB
- HSL
- Subhead GraySecondary text
- HEX
- RGB
- HSL
- Muted CaptionMuted text
- HEX
- RGB
- HSL
About The Sun's colors
The Sun's palette is dominated by a vivid red, paired with white and accented by yellow, creating a sense of urgency and approachability. The supporting grays and black provide clarity and hierarchy for news content.
Primary red contrasts with white for high visibility.
Yellow accent draws attention to key elements.
Grays support readability and structure.
Psychology
Red conveys energy, urgency, and attention, fitting for a tabloid news brand. The white and gray tones balance the intensity, ensuring readability and a clean layout.
Evolution
The Sun's color palette has remained largely unchanged since its inception, maintaining strong brand recognition. Minor adjustments to gray tones have been made for digital readability.
Where The Sun uses each color
- Primary
Used in the logo, navigation bar, and major call-to-action buttons.
- Secondary
Background for the logo and primary text areas.
- Accent
Highlights special offers, badges, and urgent news flashes.
- Backgrounds
Applied to page backgrounds and content sections for contrast.
- Text
Headline Black is used for main headlines, with Subhead Gray and Muted Caption for supporting text.
- Semantic
Success Green, Warning Amber, Error Red, and Info Blue are used for alerts and status indicators in the UI.
The Sun color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official The Sun brand color hex code is #FF202C, known as The Sun Red.
The RGB value for The Sun Red is (255, 32, 44). For print, the closest CMYK is (0, 87, 83, 0).
The Sun uses Sunlight Gray (#F8F8F8), Newsprint Gray (#F2F2F2), Tabloid Border (#E5E5E5), Subhead Gray (#666666), and Muted Caption (#999999) for backgrounds, borders, and secondary text.
Use The Sun Red (#FF202C) for primary branding and calls to action, white for backgrounds, and grays for structure and readability. Accents and semantic colors should highlight or indicate status without overwhelming the primary palette.
The secondary color is The Sun White, #FFFFFF, and the accent is The Sun 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 The Sun's colors consistently when it generates UI.
Make something in the spirit of The Sun
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.