Costa Coffee color palette
Food & DrinkCosta Coffee's color identity is defined by its signature deep maroon, supported by a palette of warm neutrals and subtle accent tones. The brand's colors evoke a sense of warmth, comfort, and premium coffeehouse experience.
costa.co.ukCosta Coffee colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Costa MaroonPrimary167, 25, 48
- Costa Deep MaroonSecondary109, 34, 50
- Costa CreamAccent249, 214, 184
Surfaces
Page, cards and dividers.- Costa WhiteBackground255, 255, 255
- Costa Light BeigeSurface245, 243, 241
- Costa Warm GrayBorder214, 207, 199
Text
Three tiers of copy.- Costa Coffee BlackText44, 42, 41
- Costa Deep MaroonSecondary text109, 34, 50
- Costa Muted TaupeMuted text140, 130, 121
Semantic
Feedback and state colors.- Costa GreenSuccess108, 154, 31
- Costa AmberWarning249, 168, 37
- Costa Error RedError215, 38, 61
- Costa Info BlueInfo58, 110, 165
Use Costa Coffee's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
costa-coffee-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A6EA5;
--error: #D7263D;
--accent: #F9D6B8;
--border: #D6CFC7;
--primary: #A71930;
--success: #6C9A1F;
--surface: #F5F3F1;
--warning: #F9A825;
--secondary: #6D2232;
--text-muted: #8C8279;
--background: #FFFFFF;
--text-primary: #2C2A29;
--text-secondary: #6D2232;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.8:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Costa Coffee background, border and text colors
The quiet part of the Costa Coffee palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Costa WhiteBackground
- HEX
- RGB
- HSL
- Costa Light BeigeSurface
- HEX
- RGB
- HSL
- Costa Warm GrayBorder
- HEX
- RGB
- HSL
- Costa Coffee BlackText
- HEX
- RGB
- HSL
- Costa Deep MaroonSecondary text
- HEX
- RGB
- HSL
- Costa Muted TaupeMuted text
- HEX
- RGB
- HSL
About Costa Coffee's colors
Costa Coffee's palette is centered on a rich maroon, complemented by warm neutrals and subtle accent hues. The color system is cohesive, evoking both heritage and a welcoming atmosphere.
Primary maroon is paired with cream and beige for contrast.
Deep maroon and taupe are used for depth and hierarchy.
Accent colors highlight calls-to-action and information.
Psychology
The deep maroon conveys warmth, richness, and a sense of tradition, aligning with the coffeehouse experience. Cream and beige tones add comfort and approachability.
Evolution
Costa's palette has remained consistent, with maroon as the brand anchor since its early years. Minor adjustments to supporting neutrals have modernized the look while retaining brand recognition.
Where Costa Coffee uses each color
- Primary
Costa Maroon is used for the logo, primary navigation, and key brand elements.
- Secondary
Costa Deep Maroon appears in headers, footers, and packaging details.
- Accent
Costa Cream is used for highlights, buttons, and promotional banners.
- Backgrounds
Costa White and Light Beige serve as background colors on the website and menus.
- Text
Costa Coffee Black is used for primary text, with Deep Maroon and Muted Taupe for secondary and muted text.
- Semantic
Green, Amber, Red, and Blue are used for success, warning, error, and informational states in digital interfaces.
Costa Coffee color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Costa Coffee brand color is Costa Maroon, hex code #A71930.
Costa Maroon (#A71930) is RGB(167, 25, 48) and CMYK(0, 85, 71, 35).
Costa uses Costa Light Beige (#F5F3F1), Costa Warm Gray (#D6CFC7), and Costa Muted Taupe (#8C8279) for backgrounds, borders, and muted text.
Use Costa Maroon (#A71930) for primary branding, with supporting neutrals for backgrounds and text, and accent colors for highlights and UI states.
The secondary color is Costa Deep Maroon, #6D2232, and the accent is Costa Cream, #F9D6B8. 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 Costa Coffee's colors consistently when it generates UI.
Make something in the spirit of Costa Coffee
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.