Grubhub color palette
EcommerceGrubhub's color identity centers around a bold, energetic red, supported by clean neutrals and subtle accents for clarity and accessibility. The palette is designed for high visibility and strong brand recognition across digital and physical touchpoints.
grubhub.comGrubhub colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Grubhub RedPrimary234, 0, 39
- Grubhub WhiteSecondary255, 255, 255
- Grubhub YellowAccent246, 199, 0
Surfaces
Page, cards and dividers.- Grubhub Light GrayBackground247, 247, 247
- Grubhub Surface WhiteSurface255, 255, 255
- Grubhub Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Grubhub BlackText34, 34, 34
- Grubhub Dark GraySecondary text102, 102, 102
- Grubhub Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Grubhub GreenSuccess0, 178, 111
- Grubhub OrangeWarning255, 159, 28
- Grubhub Error RedError215, 38, 61
- Grubhub BlueInfo0, 118, 255
Use Grubhub's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
grubhub-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0076FF;
--error: #D7263D;
--accent: #F6C700;
--border: #E0E0E0;
--primary: #EA0027;
--success: #00B26F;
--surface: #FFFFFF;
--warning: #FF9F1C;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #666666;
}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.9: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
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Grubhub gray and neutral colors
The quiet part of the Grubhub palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Grubhub Light GrayBackground
- HEX
- RGB
- HSL
- Grubhub Surface WhiteSurface
- HEX
- RGB
- HSL
- Grubhub Border GrayBorder
- HEX
- RGB
- HSL
- Grubhub BlackText
- HEX
- RGB
- HSL
- Grubhub Dark GraySecondary text
- HEX
- RGB
- HSL
- Grubhub Muted GrayMuted text
- HEX
- RGB
- HSL
About Grubhub's colors
Grubhub's palette uses a dominant red for energy and urgency, complemented by neutral grays and whites for clarity. Accent colors like yellow and green provide semantic cues for actions and statuses.
Primary red is contrasted with white for maximum legibility.
Accent yellow is used sparingly for highlights and calls to action.
Neutral grays support UI structure and text hierarchy.
Psychology
Red conveys excitement, appetite, and immediacy, aligning with food delivery. The supporting neutrals keep the interface clean and easy to navigate.
Evolution
Grubhub's core red has remained consistent, but the supporting palette has evolved to include more nuanced grays and accent colors for modern digital interfaces. The palette has been refined for accessibility and digital clarity.
Where Grubhub uses each color
- Primary
Grubhub Red is used for the logo, primary buttons, and key highlights throughout the app and website.
- Secondary
Grubhub White serves as the main background and secondary button color.
- Accent
Grubhub Yellow is used for promotional banners, highlights, and select call-to-action elements.
- Backgrounds
Grubhub Light Gray is used for app and web backgrounds to provide subtle separation from content areas.
- Text
Grubhub Black and Dark Gray are used for primary and secondary text for optimal readability.
- Semantic
Green, orange, and blue are used for success, warning, and informational states, while Error Red signals errors.
Grubhub color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Grubhub brand color is Grubhub Red, hex code #EA0027.
Grubhub Red is #EA0027, which is RGB(234, 0, 39) and CMYK(0, 100, 83, 8).
Grubhub uses Light Gray (#F7F7F7), Border Gray (#E0E0E0), Dark Gray (#666666), and Muted Gray (#A3A3A3) for backgrounds, borders, and text hierarchy.
Use Grubhub Red (#EA0027) for primary actions and branding, neutrals for backgrounds and text, and accent colors for semantic feedback and highlights.
The secondary color is Grubhub White, #FFFFFF, and the accent is Grubhub Yellow, #F6C700. 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 Grubhub's colors consistently when it generates UI.
Make something in the spirit of Grubhub
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.