Shake Shack color palette
Food & DrinkShake Shack's color identity is defined by its signature green, complemented by a clean, modern palette of neutrals and subtle accent tones. The brand's colors evoke freshness and approachability, reflecting its focus on quality ingredients and contemporary design.
shakeshack.comShake Shack colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Shack GreenPrimary83, 165, 71
- Shack CharcoalSecondary34, 34, 34
- Shack YellowAccent245, 223, 77
Surfaces
Page, cards and dividers.- Shack WhiteBackground255, 255, 255
- Shack Light GraySurface247, 247, 247
- Shack Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Shack CharcoalText34, 34, 34
- Shack Medium GraySecondary text117, 117, 117
- Shack Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Shack GreenSuccess83, 165, 71
- Shack YellowWarning245, 223, 77
- Shack Error RedError211, 47, 47
- Shack Info BlueInfo25, 118, 210
Use Shake Shack's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
shake-shack-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #F5DF4D;
--border: #E5E5E5;
--primary: #53A547;
--success: #53A547;
--surface: #F7F7F7;
--warning: #F5DF4D;
--secondary: #222222;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #757575;
}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
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Shake Shack gray and neutral colors
The quiet part of the Shake Shack palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Shack WhiteBackground
- HEX
- RGB
- HSL
- Shack Light GraySurface
- HEX
- RGB
- HSL
- Shack Border GrayBorder
- HEX
- RGB
- HSL
- Shack CharcoalText
- HEX
- RGB
- HSL
- Shack Medium GraySecondary text
- HEX
- RGB
- HSL
- Shack Muted GrayMuted text
- HEX
- RGB
- HSL
About Shake Shack's colors
Shake Shack's palette centers on a vibrant green, symbolizing freshness, with supporting neutrals for clarity and modernity. The accent yellow adds energy and highlights, while dark and light grays provide balance.
Primary green paired with white and charcoal for strong contrast.
Accent yellow used sparingly for calls to action.
Grays unify UI elements and text for readability.
Psychology
Green communicates freshness, health, and approachability, aligning with Shake Shack's food ethos. The neutral tones create a clean, trustworthy environment for the brand experience.
Evolution
Shake Shack's palette has remained consistent since its inception, with minor refinements to the green and supporting neutrals for digital clarity. The brand's color system is stable, maintaining strong recognition.
Where Shake Shack uses each color
- Primary
Shack Green is used for the logo, primary buttons, and key highlights across digital and physical assets.
- Secondary
Shack Charcoal appears in navigation bars, headings, and major text elements.
- Accent
Shack Yellow is reserved for promotional banners, highlights, and limited-time offers.
- Backgrounds
Shack White and Shack Light Gray are used for backgrounds in web, app, and packaging.
- Text
Shack Charcoal is the main text color, with Medium and Muted Grays for secondary and disabled text.
- Semantic
Shack Green and Yellow are used for success and warning states, while Error Red and Info Blue denote errors and informational messages.
Shake Shack color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Shake Shack brand color is Shack Green, hex code #53A547.
Shack Green (#53A547) is RGB(83, 165, 71) and CMYK(50, 0, 57, 35).
Shake Shack uses Shack Charcoal (#222222), Shack Medium Gray (#757575), Shack Muted Gray (#BDBDBD), and Shack Light Gray (#F7F7F7) for UI and text.
Use Shack Green (#53A547) for primary branding and actions, neutrals for backgrounds and text, and Shack Yellow (#F5DF4D) for accents and highlights. Maintain contrast and brand consistency across all applications.
The secondary color is Shack Charcoal, #222222, and the accent is Shack Yellow, #F5DF4D. 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 Shake Shack's colors consistently when it generates UI.
Make something in the spirit of Shake Shack
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.