Deliveroo color palette
Food & DrinkDeliveroo's color identity is defined by its vibrant teal primary, supported by a modern palette of darks, greys, and energetic accent hues. The system ensures high brand recognition across digital and physical touchpoints.
deliveroo.co.ukDeliveroo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Deliveroo TealPrimary0, 204, 188
- Deliveroo NavySecondary52, 59, 75
- Deliveroo CoralAccent255, 76, 96
Surfaces
Page, cards and dividers.- Deliveroo WhiteBackground255, 255, 255
- Deliveroo Light GreySurface246, 246, 246
- Deliveroo Border GreyBorder229, 229, 229
Text
Three tiers of copy.- Deliveroo Text NavyText52, 59, 75
- Deliveroo Text GreySecondary text107, 114, 128
- Deliveroo Muted GreyMuted text160, 174, 192
Semantic
Feedback and state colors.- Deliveroo TealSuccess0, 204, 188
- Deliveroo YellowWarning255, 214, 0
- Deliveroo CoralError255, 76, 96
- Deliveroo Info TealInfo0, 184, 169
Use Deliveroo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
deliveroo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8A9;
--error: #FF4C60;
--accent: #FF4C60;
--border: #E5E5E5;
--primary: #00CCBC;
--success: #00CCBC;
--surface: #F6F6F6;
--warning: #FFD600;
--secondary: #343B4B;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #343B4B;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
11.2:1
Pass
Text on surface
Needs 4.5:1 for body text
10.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Fail
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.1:1
Fail
Deliveroo background, border and text colors
The quiet part of the Deliveroo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Deliveroo WhiteBackground
- HEX
- RGB
- HSL
- Deliveroo Light GreySurface
- HEX
- RGB
- HSL
- Deliveroo Border GreyBorder
- HEX
- RGB
- HSL
- Deliveroo Text NavyText
- HEX
- RGB
- HSL
- Deliveroo Text GreySecondary text
- HEX
- RGB
- HSL
- Deliveroo Muted GreyMuted text
- HEX
- RGB
- HSL
About Deliveroo's colors
Deliveroo's palette is built around a distinctive teal, contrasted with deep navy and bright accent colors for clarity and energy. The supporting neutrals create a clean, modern interface.
Primary teal contrasts with dark navy for hierarchy.
Accent coral and yellow provide visual emphasis.
Greys and whites maintain clarity and readability.
Psychology
The teal conveys freshness, approachability, and modernity, aligning with food delivery and convenience. Accents add vibrancy and urgency where needed.
Evolution
Deliveroo's palette has remained stable since its major rebrand in 2016, focusing on recognizability. Minor adjustments have refined accent and neutral tones for digital clarity.
Where Deliveroo uses each color
- Primary
Used for main navigation, buttons, and highlights across the app and website.
- Secondary
Appears in headers, footers, and as a background for cards and overlays.
- Accent
Applied to call-to-action elements, notifications, and promotional banners.
- Backgrounds
White and light grey are used for page backgrounds and content surfaces.
- Text
Navy and grey tones are used for primary and secondary text for optimal legibility.
- Semantic
Teal signals success, coral indicates errors, and yellow is used for warnings or highlights.
Deliveroo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Deliveroo primary color is #00CCBC. This teal is used throughout their branding and digital products.
Deliveroo Teal (#00CCBC) in RGB is (0, 204, 188) and in CMYK is (100, 0, 8, 20).
Deliveroo uses #343B4B (Navy) for dark UI elements and #F6F6F6 and #E5E5E5 for light and border greys. These neutrals are consistent across their digital interfaces.
Use #00CCBC for primary actions and highlights, with navy and greys for backgrounds and text. Accent colors like #FF4C60 and #FFD600 should be reserved for notifications and emphasis.
The secondary color is Deliveroo Navy, #343B4B, and the accent is Deliveroo Coral, #FF4C60. Together with the primary they make up the three brand colors at the top of this page.
3 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 Deliveroo's colors consistently when it generates UI.
Make something in the spirit of Deliveroo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.