Sainsbury's color palette
Food & DrinkSainsbury's brand identity is defined by its distinctive orange, supported by a clean, modern palette of neutrals and accent colors. The color system is consistent across digital and physical touchpoints, reinforcing brand recognition.
sainsburys.co.ukSainsbury's colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sainsbury's OrangePrimary236, 138, 0
- Sainsbury's WhiteSecondary255, 255, 255
- Sainsbury's BurgundyAccent106, 29, 29
Surfaces
Page, cards and dividers.- Sainsbury's Light CreamBackground247, 246, 243
- Sainsbury's Pale GreySurface242, 242, 242
- Sainsbury's Light GreyBorder216, 216, 216
Text
Three tiers of copy.- Sainsbury's CharcoalText34, 34, 34
- Sainsbury's Mid GreySecondary text102, 102, 102
- Sainsbury's Muted GreyMuted text163, 163, 163
Semantic
Feedback and state colors.- Sainsbury's GreenSuccess59, 134, 63
- Sainsbury's YellowWarning246, 190, 0
- Sainsbury's RedError200, 16, 46
- Sainsbury's BlueInfo0, 114, 206
Use Sainsbury's's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sainsburys-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #C8102E;
--accent: #6A1D1D;
--border: #D8D8D8;
--primary: #EC8A00;
--success: #3B863F;
--surface: #F2F2F2;
--warning: #F6BE00;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F6F3;
--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
14.7: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.3: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.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Sainsbury's background, border and text colors
The quiet part of the Sainsbury's palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sainsbury's Light CreamBackground
- HEX
- RGB
- HSL
- Sainsbury's Pale GreySurface
- HEX
- RGB
- HSL
- Sainsbury's Light GreyBorder
- HEX
- RGB
- HSL
- Sainsbury's CharcoalText
- HEX
- RGB
- HSL
- Sainsbury's Mid GreySecondary text
- HEX
- RGB
- HSL
- Sainsbury's Muted GreyMuted text
- HEX
- RGB
- HSL
About Sainsbury's's colors
Sainsbury's color palette is centered on a vibrant orange, complemented by neutral tones and strategic accent colors for clarity and accessibility. The palette ensures strong brand recognition and usability across all platforms.
Primary orange contrasts with white and cream backgrounds.
Accent burgundy is used for highlights and calls to action.
Greys provide structure and support for text and UI elements.
Psychology
Orange conveys warmth, friendliness, and approachability, aligning with Sainsbury's customer-focused ethos. The supporting neutrals and accent colors create a trustworthy and modern impression.
Evolution
Sainsbury's orange has been a core brand color for decades, with only minor refinements to its exact shade. The supporting palette has gradually modernized, introducing more subtle greys and accent tones for digital clarity.
Where Sainsbury's uses each color
- Primary
Used in the logo, navigation bars, and key buttons.
- Secondary
Employed as the main background for web and print materials.
- Accent
Appears in promotional banners, highlights, and special offers.
- Backgrounds
Light cream and pale grey are used for page backgrounds and cards.
- Text
Charcoal and mid grey are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for status indicators such as success, warning, error, and informational messages.
Sainsbury's color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Sainsbury's orange is #EC8A00. This color is used prominently in the logo and key brand elements.
The RGB value for #EC8A00 is (236, 138, 0). In CMYK, it is approximately (0, 42, 100, 7).
Sainsbury's uses #F7F6F3 (Light Cream), #F2F2F2 (Pale Grey), and #222222 (Charcoal) for backgrounds and text. These support accessibility and brand consistency.
Use #EC8A00 for primary actions and branding, with neutrals for backgrounds and surfaces. Accent and semantic colors should be reserved for highlights, alerts, and status indicators.
The secondary color is Sainsbury's White, #FFFFFF, and the accent is Sainsbury's Burgundy, #6A1D1D. 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 Sainsbury's's colors consistently when it generates UI.
Make something in the spirit of Sainsbury's
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.