Five Guys color palette
Food & DrinkFive Guys' brand identity centers on a bold, instantly recognizable red paired with clean white and neutral grays, reflecting its classic American diner roots. The palette is simple and iconic, emphasizing clarity and approachability.
fiveguys.comFive Guys colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Five Guys RedPrimary237, 23, 79
- Five Guys WhiteSecondary255, 255, 255
- Five Guys Deep RedAccent200, 16, 46
Surfaces
Page, cards and dividers.- Five Guys WhiteBackground255, 255, 255
- Five Guys Light GraySurface247, 247, 247
- Five Guys Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Five Guys CharcoalText34, 34, 34
- Five Guys Medium GraySecondary text102, 102, 102
- Five Guys Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Five Guys Success GreenSuccess75, 181, 67
- Five Guys Warning YellowWarning255, 194, 14
- Five Guys Error RedError215, 38, 61
- Five Guys Info BlueInfo0, 114, 206
Use Five Guys's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
five-guys-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D7263D;
--accent: #C8102E;
--border: #E5E5E5;
--primary: #ED174F;
--success: #4BB543;
--surface: #F7F7F7;
--warning: #FFC20E;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Five Guys gray and neutral colors
The quiet part of the Five Guys palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Five Guys WhiteBackground
- HEX
- RGB
- HSL
- Five Guys Light GraySurface
- HEX
- RGB
- HSL
- Five Guys Border GrayBorder
- HEX
- RGB
- HSL
- Five Guys CharcoalText
- HEX
- RGB
- HSL
- Five Guys Medium GraySecondary text
- HEX
- RGB
- HSL
- Five Guys Muted GrayMuted text
- HEX
- RGB
- HSL
About Five Guys's colors
Five Guys uses a high-contrast palette dominated by red and white, evoking energy and cleanliness. The supporting grays provide balance and usability in digital and print applications.
Red and white create a strong, memorable contrast.
Neutral grays support readability and modern UI needs.
Accent red deepens the primary for visual hierarchy.
Psychology
Red stimulates appetite and conveys excitement, fitting for a fast-casual burger brand. White and gray add a sense of trust, cleanliness, and simplicity.
Evolution
The Five Guys palette has remained virtually unchanged since its inception, maintaining strong brand consistency. Minor adjustments have been made to gray tones for digital clarity.
Where Five Guys uses each color
- Primary
Five Guys Red is used for logos, headers, call-to-action buttons, and store signage.
- Secondary
Five Guys White serves as the main background for menus, packaging, and digital interfaces.
- Accent
Five Guys Deep Red highlights navigation, active states, and promotional banners.
- Backgrounds
White and light gray backgrounds are used for web pages, menu boards, and in-store materials.
- Text
Charcoal and medium gray are used for primary and secondary text across digital and print assets.
- Semantic
Success green, warning yellow, error red, and info blue are used for status messaging and system feedback in digital products.
Five Guys color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Five Guys brand red is #ED174F. This color is used for the logo and primary branding elements.
Five Guys Red (#ED174F) is RGB(237, 23, 79) and CMYK(0, 90, 55, 7). These values ensure consistency across print and digital media.
Five Guys uses a range of grays: #F7F7F7 for light backgrounds, #E5E5E5 for borders, #222222 for primary text, and #666666 for secondary text. These neutrals support readability and clean design.
Use Five Guys Red (#ED174F) for primary actions and branding, white (#FFFFFF) for backgrounds, and grays for text and UI elements. Accent and semantic colors are reserved for highlights and status indications.
The secondary color is Five Guys White, #FFFFFF, and the accent is Five Guys Deep Red, #C8102E. 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 Five Guys's colors consistently when it generates UI.
Make something in the spirit of Five Guys
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.