Greggs color palette
Food & DrinkGreggs uses a distinctive deep blue and yellow color palette, reflecting its approachable and energetic brand identity. The colors are consistent across its stores, packaging, and digital presence.
greggs.co.ukGreggs colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Greggs BluePrimary0, 83, 159
- Greggs YellowSecondary255, 209, 0
- Greggs GoldAccent247, 168, 0
Surfaces
Page, cards and dividers.- Greggs WhiteBackground255, 255, 255
- Greggs Light GreySurface245, 245, 245
- Greggs Border GreyBorder209, 213, 219
Text
Three tiers of copy.- Greggs CharcoalText34, 34, 34
- Greggs SlateSecondary text75, 85, 99
- Greggs Muted GreyMuted text107, 114, 128
Semantic
Feedback and state colors.- Greggs GreenSuccess108, 179, 63
- Greggs Warning AmberWarning255, 184, 0
- Greggs Error RedError215, 38, 61
- Greggs Info BlueInfo0, 159, 219
Use Greggs's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
greggs-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDB;
--error: #D7263D;
--accent: #F7A800;
--border: #D1D5DB;
--primary: #00539F;
--success: #6CB33F;
--surface: #F5F5F5;
--warning: #FFB800;
--secondary: #FFD100;
--text-muted: #6B7280;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4B5563;
}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.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.4:1
Pass
Greggs gray and neutral colors
The quiet part of the Greggs palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Greggs WhiteBackground
- HEX
- RGB
- HSL
- Greggs Light GreySurface
- HEX
- RGB
- HSL
- Greggs Border GreyBorder
- HEX
- RGB
- HSL
- Greggs CharcoalText
- HEX
- RGB
- HSL
- Greggs SlateSecondary text
- HEX
- RGB
- HSL
- Greggs Muted GreyMuted text
- HEX
- RGB
- HSL
About Greggs's colors
Greggs' color palette is built around a bold blue and vibrant yellow, creating a friendly and energetic look. The palette uses neutral greys and white for clarity and accessibility.
Primary blue and yellow are complementary and create strong visual contrast.
Accent gold is used sparingly for highlights.
Neutral greys balance the vivid brand colors in UI elements.
Psychology
Blue conveys trust, reliability, and approachability, which are key to Greggs' brand. Yellow adds warmth, optimism, and a sense of energy.
Evolution
Greggs' palette has remained stable, with blue and yellow as core brand elements for decades. Minor adjustments to accent and neutral tones have been made for digital clarity.
Where Greggs uses each color
- Primary
Greggs Blue is used for navigation bars, headers, and store signage.
- Secondary
Greggs Yellow appears in call-to-action buttons, highlights, and packaging.
- Accent
Greggs Gold is used for subtle highlights and promotional graphics.
- Backgrounds
White and light grey backgrounds are used for app screens and website sections.
- Text
Charcoal and slate greys are used for primary and secondary text throughout digital and print materials.
- Semantic
Green, amber, and red are used for status indicators, alerts, and notifications in digital interfaces.
Greggs color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Greggs primary brand color is Greggs Blue, hex code #00539F.
Greggs Blue (#00539F) has an RGB value of (0, 83, 159) and a CMYK value of (100, 48, 0, 38).
Greggs uses Charcoal (#222222), Slate (#4B5563), and Muted Grey (#6B7280) for text and UI elements, providing contrast and readability.
Primary and secondary colors should dominate key brand touchpoints, while neutrals and semantic colors support UI clarity and accessibility. Always use the exact hex codes to maintain consistency.
The secondary color is Greggs Yellow, #FFD100, and the accent is Greggs Gold, #F7A800. 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 Greggs's colors consistently when it generates UI.
Make something in the spirit of Greggs
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.