Zomato color palette
Food & DrinkZomato's color identity is defined by a bold, energetic red paired with clean neutrals and subtle grays for UI clarity. The palette is instantly recognizable and consistent across digital and print applications.
zomato.comZomato colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Zomato RedPrimary226, 55, 68
- Zomato Light GraySecondary245, 245, 246
- Zomato AmberAccent255, 179, 0
Surfaces
Page, cards and dividers.- Zomato WhiteBackground255, 255, 255
- Zomato Surface GraySurface248, 248, 248
- Zomato Border GrayBorder233, 233, 235
Text
Three tiers of copy.- Zomato BlackText28, 28, 28
- Zomato CharcoalSecondary text105, 105, 105
- Zomato Muted GrayMuted text154, 154, 154
Semantic
Feedback and state colors.- Zomato GreenSuccess67, 160, 71
- Zomato OrangeWarning255, 152, 0
- Zomato Error RedError211, 47, 47
- Zomato BlueInfo25, 118, 210
Use Zomato's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
zomato-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFB300;
--border: #E9E9EB;
--primary: #E23744;
--success: #43A047;
--surface: #F8F8F8;
--warning: #FF9800;
--secondary: #F5F5F6;
--text-muted: #9A9A9A;
--background: #FFFFFF;
--text-primary: #1C1C1C;
--text-secondary: #696969;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.0:1
Pass
Text on surface
Needs 4.5:1 for body text
16.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Zomato gray and neutral colors
The quiet part of the Zomato palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Zomato WhiteBackground
- HEX
- RGB
- HSL
- Zomato Surface GraySurface
- HEX
- RGB
- HSL
- Zomato Border GrayBorder
- HEX
- RGB
- HSL
- Zomato BlackText
- HEX
- RGB
- HSL
- Zomato CharcoalSecondary text
- HEX
- RGB
- HSL
- Zomato Muted GrayMuted text
- HEX
- RGB
- HSL
About Zomato's colors
Zomato's palette centers on a vibrant red, evoking appetite and urgency, complemented by neutral grays and whites for balance. Accent colors are used sparingly to highlight actions and statuses.
Primary red contrasts with white and light gray backgrounds.
Accent amber draws attention to ratings and highlights.
Neutral grays support readability and UI structure.
Psychology
Red stimulates appetite and signals excitement, making it ideal for a food discovery platform. The supporting neutrals create a clean, modern interface that keeps the focus on content.
Evolution
Zomato's core red has remained consistent since its rebrand, ensuring strong brand recall. The UI neutrals and accent colors have been refined for clarity and accessibility over time.
Where Zomato uses each color
- Primary
Used in the logo, primary buttons, and key navigation elements.
- Secondary
Applied to background areas, cards, and secondary UI elements.
- Accent
Highlights ratings, badges, and important notifications.
- Backgrounds
Predominantly white for main app and website screens.
- Text
Primary text is near-black for maximum readability; secondary and muted grays are used for less prominent information.
- Semantic
Green, orange, and blue are used for success, warning, and informational messages respectively; error red signals critical issues.
Zomato color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Zomato primary color is #E23744, known as Zomato Red. This color is used for the logo and key brand elements.
Zomato Red (#E23744) has an RGB value of 226, 55, 68 and a CMYK value of 0, 76, 70, 11.
Zomato uses several neutrals: Zomato Light Gray (#F5F5F6), Zomato Surface Gray (#F8F8F8), and Zomato Border Gray (#E9E9EB) for backgrounds and UI surfaces.
Use Zomato Red (#E23744) for primary actions and branding, with neutrals for backgrounds and surfaces. Accent and semantic colors should highlight important information without overwhelming the interface.
The secondary color is Zomato Light Gray, #F5F5F6, and the accent is Zomato Amber, #FFB300. 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 Zomato's colors consistently when it generates UI.
Make something in the spirit of Zomato
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.