Tesco color palette
Food & DrinkTesco's color identity is defined by its signature blue and red, supported by a clean white and a range of neutral greys for clarity and accessibility. The palette is consistent across digital, print, and physical environments.
tesco.comTesco colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tesco BluePrimary0, 83, 159
- Tesco RedSecondary238, 28, 46
- Tesco YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Tesco WhiteBackground255, 255, 255
- Tesco Light GreySurface246, 246, 246
- Tesco Border GreyBorder214, 214, 214
Text
Three tiers of copy.- Tesco CharcoalText34, 34, 34
- Tesco Medium GreySecondary text102, 102, 102
- Tesco Muted GreyMuted text153, 153, 153
Semantic
Feedback and state colors.- Tesco GreenSuccess0, 130, 59
- Tesco AmberWarning255, 181, 0
- Tesco Error RedError208, 2, 27
- Tesco Info BlueInfo0, 112, 192
Use Tesco's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tesco-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0070C0;
--error: #D0021B;
--accent: #FFD100;
--border: #D6D6D6;
--primary: #00539F;
--success: #00823B;
--surface: #F6F6F6;
--warning: #FFB500;
--secondary: #EE1C2E;
--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
14.7: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.3: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.6:1
Fail
Tesco gray and neutral colors
The quiet part of the Tesco palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tesco WhiteBackground
- HEX
- RGB
- HSL
- Tesco Light GreySurface
- HEX
- RGB
- HSL
- Tesco Border GreyBorder
- HEX
- RGB
- HSL
- Tesco CharcoalText
- HEX
- RGB
- HSL
- Tesco Medium GreySecondary text
- HEX
- RGB
- HSL
- Tesco Muted GreyMuted text
- HEX
- RGB
- HSL
About Tesco's colors
Tesco's palette uses a bold blue and red for brand recognition, complemented by white and subtle greys for clarity and accessibility. The colors are chosen for high contrast and legibility in all contexts.
Primary blue and red are used together for strong brand presence.
Neutral greys and white provide balance and readability.
Accent yellow and green are used for highlights and status messaging.
Psychology
Tesco Blue conveys trust, reliability, and professionalism, while Tesco Red adds energy and visibility. The supporting neutrals ensure a clean, accessible interface for all users.
Evolution
Tesco's core blue and red have remained consistent for decades, reinforcing brand recognition. The supporting palette of greys and accent colors has been refined for digital accessibility and modern UI needs.
Where Tesco uses each color
- Primary
Tesco Blue is used for navigation bars, headers, and key buttons across digital and print assets.
- Secondary
Tesco Red appears in logos, call-to-action buttons, and promotional graphics.
- Accent
Tesco Yellow is used for highlights, price tags, and special offers.
- Backgrounds
Tesco White and Tesco Light Grey are used for page backgrounds and content areas.
- Text
Tesco Charcoal and Tesco Medium Grey are used for primary and secondary text, ensuring readability.
- Semantic
Tesco Green, Amber, and Error Red are used for success, warning, and error states in UI messaging.
Tesco color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tesco primary color hex code is #00539F. This is known as Tesco Blue.
Tesco Blue (#00539F) is RGB(0, 83, 159) and CMYK(100, 48, 0, 38). Use these values for accurate reproduction in digital and print.
Tesco uses a range of greys including Tesco Light Grey (#F6F6F6), Border Grey (#D6D6D6), and Charcoal (#222222) for backgrounds, borders, and text. These ensure clarity and accessibility across interfaces.
Use Tesco Blue (#00539F) and Tesco Red (#EE1C2E) for primary brand elements, with neutrals for backgrounds and text. Accent and semantic colors are reserved for highlights, notifications, and status messaging.
The secondary color is Tesco Red, #EE1C2E, and the accent is Tesco 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 Tesco's colors consistently when it generates UI.
Make something in the spirit of Tesco
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.