In-N-Out color palette
Food & DrinkIn-N-Out Burger's color identity is defined by its signature bold red and yellow palette, reflecting its classic American fast-food heritage. The brand uses bright, saturated colors for high visibility and strong recognition.
in-n-out.comIn-N-Out colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- In-N-Out RedPrimary243, 8, 29
- In-N-Out YellowSecondary255, 217, 0
- In-N-Out WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- In-N-Out WhiteBackground255, 255, 255
- Tray GreySurface247, 247, 247
- Countertop GreyBorder229, 229, 229
Text
Three tiers of copy.- Menu BlackText34, 34, 34
- Receipt GreySecondary text102, 102, 102
- Muted GreyMuted text160, 160, 160
Semantic
Feedback and state colors.- Palm Tree GreenSuccess67, 160, 71
- Caution YellowWarning255, 179, 0
- Alert RedError211, 47, 47
- Info BlueInfo2, 136, 209
Use In-N-Out's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
in-n-out-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #E5E5E5;
--primary: #F3081D;
--success: #43A047;
--surface: #F7F7F7;
--warning: #FFB300;
--secondary: #FFD900;
--text-muted: #A0A0A0;
--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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
In-N-Out gray and neutral colors
The quiet part of the In-N-Out palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- In-N-Out WhiteBackground
- HEX
- RGB
- HSL
- Tray GreySurface
- HEX
- RGB
- HSL
- Countertop GreyBorder
- HEX
- RGB
- HSL
- Menu BlackText
- HEX
- RGB
- HSL
- Receipt GreySecondary text
- HEX
- RGB
- HSL
- Muted GreyMuted text
- HEX
- RGB
- HSL
About In-N-Out's colors
In-N-Out's palette is anchored by vibrant red and yellow, evoking energy, appetite, and warmth. The supporting neutrals and accent colors provide clarity and contrast for legibility.
Red and yellow are complementary for high visibility.
White and greys balance the saturated primaries.
Green and blue are reserved for semantic feedback.
Psychology
Red stimulates appetite and excitement, while yellow conveys friendliness and speed. The palette is designed to be inviting and instantly recognizable.
Evolution
The core red and yellow colors have remained unchanged since the brand's founding, maintaining a consistent identity. Minor adjustments to neutrals and supporting colors have been made for digital clarity.
Where In-N-Out uses each color
- Primary
In-N-Out Red is used for logos, signage, and primary call-to-action buttons.
- Secondary
In-N-Out Yellow appears in the arrow motif, accents, and packaging highlights.
- Accent
In-N-Out White is the background for menus, website pages, and uniforms.
- Backgrounds
Tray Grey and Countertop Grey are used for website backgrounds, trays, and subtle UI elements.
- Text
Menu Black is used for primary text, with Receipt Grey and Muted Grey for secondary and muted content.
- Semantic
Palm Tree Green, Caution Yellow, Alert Red, and Info Blue are used for status messages, alerts, and feedback.
In-N-Out color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official In-N-Out primary red is #F3081D. This color is used for the logo and key brand elements.
In-N-Out Red (#F3081D) in RGB is (243, 8, 29). For CMYK, it is approximately (0, 97, 88, 5).
In-N-Out uses Tray Grey (#F7F7F7) and Countertop Grey (#E5E5E5) for backgrounds and UI surfaces. Text colors include Menu Black (#222222), Receipt Grey (#666666), and Muted Grey (#A0A0A0).
Use In-N-Out Red (#F3081D) and Yellow (#FFD900) for prominent branding and accents. Neutrals and semantic colors provide structure and feedback in UI and print applications.
The secondary color is In-N-Out Yellow, #FFD900, and the accent is In-N-Out White, #FFFFFF. 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 In-N-Out's colors consistently when it generates UI.
Make something in the spirit of In-N-Out
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.