Uber Eats color palette
EcommerceUber Eats uses a distinctive green paired with deep black and neutral grays, reflecting a modern, tech-forward food delivery service. The palette is minimal and functional, emphasizing clarity and brand recognition.
ubereats.comUber Eats colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Uber Eats GreenPrimary6, 193, 103
- Uber Eats BlackSecondary0, 0, 0
- Uber Eats WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Uber Eats Dark BackgroundBackground18, 18, 18
- Uber Eats Surface GraySurface34, 34, 34
- Uber Eats Border GrayBorder45, 45, 45
Text
Three tiers of copy.- Uber Eats Text WhiteText255, 255, 255
- Uber Eats Text GraySecondary text175, 175, 175
- Uber Eats Muted GrayMuted text107, 107, 107
Semantic
Feedback and state colors.- Uber Eats Success GreenSuccess6, 193, 103
- Uber Eats Warning YellowWarning255, 192, 67
- Uber Eats Error RedError255, 75, 75
- Uber Eats Info BlueInfo36, 145, 255
Use Uber Eats's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
uber-eats-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2491FF;
--error: #FF4B4B;
--accent: #FFFFFF;
--border: #2D2D2D;
--primary: #06C167;
--success: #06C167;
--surface: #222222;
--warning: #FFC043;
--secondary: #000000;
--text-muted: #6B6B6B;
--background: #121212;
--text-primary: #FFFFFF;
--text-secondary: #AFAFAF;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Fail
Uber Eats gray, dark and neutral colors
Uber Eats runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Uber Eats Dark BackgroundBackground
- HEX
- RGB
- HSL
- Uber Eats Surface GraySurface
- HEX
- RGB
- HSL
- Uber Eats Border GrayBorder
- HEX
- RGB
- HSL
- Uber Eats Text WhiteText
- HEX
- RGB
- HSL
- Uber Eats Text GraySecondary text
- HEX
- RGB
- HSL
- Uber Eats Muted GrayMuted text
- HEX
- RGB
- HSL
About Uber Eats's colors
Uber Eats' color system is built around a vibrant green contrasted with black and neutral grays, creating a bold and recognizable identity. The palette emphasizes clarity, accessibility, and a modern digital feel.
Primary green is used for calls to action and highlights.
Deep black and dark grays form the UI foundation.
White and light grays provide contrast for text and icons.
Psychology
The green evokes freshness and health, aligning with food delivery and positive action. Black and gray tones convey reliability, sophistication, and focus on content.
Evolution
Uber Eats' palette has remained consistent since its rebranding, with green and black as core elements. Minor adjustments have refined gray tones for improved accessibility and digital clarity.
Where Uber Eats uses each color
- Primary
Uber Eats Green is used for primary buttons, highlights, and key action elements across the app and website.
- Secondary
Uber Eats Black serves as the main navigation bar and background for headers and footers.
- Accent
Uber Eats White is used for text on dark backgrounds and as a background for cards and content areas.
- Backgrounds
Uber Eats Dark Background is the default app and web background, providing a modern, immersive experience.
- Text
Text White and Text Gray are used for primary and secondary text, ensuring legibility on dark surfaces.
- Semantic
Success, warning, error, and info colors are used for status indicators, notifications, and system feedback.
Uber Eats color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Uber Eats primary color is #06C167, known as Uber Eats Green.
Uber Eats Green (#06C167) is RGB(6, 193, 103) and CMYK(97, 0, 47, 24).
Uber Eats uses #121212 (Dark Background), #222222 (Surface Gray), #2D2D2D (Border Gray), #AFAFAF (Text Gray), and #6B6B6B (Muted Gray) for neutral UI elements.
Use Uber Eats Green (#06C167) for primary actions, black and dark grays for backgrounds, and white or light gray for text and surfaces to maintain brand consistency.
The secondary color is Uber Eats Black, #000000, and the accent is Uber Eats White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Uber Eats's colors consistently when it generates UI.
Make something in the spirit of Uber Eats
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.