Doritos color palette
Food & DrinkDoritos' color identity is defined by its bold, high-contrast palette, anchored by its signature fiery orange and deep black. The brand uses these colors to evoke energy, excitement, and a sense of daring.
doritos.comDoritos colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Doritos Fiery OrangePrimary255, 90, 30
- Doritos BlackSecondary35, 31, 32
- Doritos Nacho YellowAccent255, 210, 0
Surfaces
Page, cards and dividers.- Doritos WhiteBackground255, 255, 255
- Doritos Light GraySurface246, 246, 246
- Doritos Medium GrayBorder190, 190, 190
Text
Three tiers of copy.- Doritos BlackText35, 31, 32
- Doritos Fiery OrangeSecondary text255, 90, 30
- Doritos Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Doritos Lime GreenSuccess122, 193, 67
- Doritos Nacho YellowWarning255, 210, 0
- Doritos Spicy RedError215, 38, 49
- Doritos Cool BlueInfo0, 154, 222
Use Doritos's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
doritos-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009ADE;
--error: #D72631;
--accent: #FFD200;
--border: #BEBEBE;
--primary: #FF5A1E;
--success: #7AC143;
--surface: #F6F6F6;
--warning: #FFD200;
--secondary: #231F20;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #FF5A1E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
2.9:1
Fail
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Doritos background, border and text colors
The quiet part of the Doritos palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Doritos WhiteBackground
- HEX
- RGB
- HSL
- Doritos Light GraySurface
- HEX
- RGB
- HSL
- Doritos Medium GrayBorder
- HEX
- RGB
- HSL
- Doritos BlackText
- HEX
- RGB
- HSL
- Doritos Fiery OrangeSecondary text
- HEX
- RGB
- HSL
- Doritos Muted GrayMuted text
- HEX
- RGB
- HSL
About Doritos's colors
Doritos' palette is built around high-contrast, energetic colors to maximize shelf impact and brand recognition. The fiery orange and deep black create a sense of boldness and appetite appeal.
Primary orange pairs with black for maximum contrast.
Accent yellow highlights flavor cues and draws attention.
Neutral grays and white balance the bold palette.
Psychology
The fiery orange stimulates appetite and excitement, while black conveys boldness and intensity. Yellow accents add a sense of fun and energy.
Evolution
Doritos' core orange and black palette has remained consistent since the 2000s, reinforcing strong brand recognition. Minor adjustments have been made to accent and neutral tones for modern digital use.
Where Doritos uses each color
- Primary
Used in the Doritos logo, main CTAs, and key packaging elements.
- Secondary
Appears in backgrounds, navigation bars, and logo outlines.
- Accent
Used for flavor highlights, promotional banners, and callouts.
- Backgrounds
White and light gray are used for website backgrounds and product pages.
- Text
Black is used for primary text, with orange for emphasis and muted gray for secondary information.
- Semantic
Lime green, yellow, red, and blue are used for success, warning, error, and info states in digital UI and flavor cues.
Doritos color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Doritos brand color is #FF5A1E, known as Doritos Fiery Orange.
Doritos Fiery Orange (#FF5A1E) is RGB(255, 90, 30) and CMYK(0, 65, 88, 0).
Doritos uses #F6F6F6 (Doritos Light Gray), #BEBEBE (Doritos Medium Gray), and #757575 (Doritos Muted Gray) for UI backgrounds and muted text.
Use #FF5A1E for primary actions and branding, #231F20 for backgrounds and text, and #FFD200 for accents and highlights. Neutrals support readability and balance the bold palette.
The secondary color is Doritos Black, #231F20, and the accent is Doritos Nacho Yellow, #FFD200. 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 Doritos's colors consistently when it generates UI.
Make something in the spirit of Doritos
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.