Cheetos color palette
Food & DrinkCheetos' brand identity is defined by its signature bold orange, accented with black and yellow, reflecting the snack's vibrant and playful personality. The palette is consistent across packaging, digital, and promotional materials.
cheetos.comCheetos colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Cheetos OrangePrimary255, 102, 0
- Cheetos YellowSecondary255, 209, 0
- Cheetos BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Cheetos WhiteBackground255, 255, 255
- Cheetos Light GraySurface246, 246, 246
- Cheetos Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Cheetos CharcoalText34, 34, 34
- Cheetos Medium GraySecondary text102, 102, 102
- Cheetos Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Cheetos Success GreenSuccess139, 195, 74
- Cheetos Warning AmberWarning255, 160, 0
- Cheetos Error RedError211, 47, 47
- Cheetos Info BlueInfo2, 136, 209
Use Cheetos's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cheetos-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #D32F2F;
--accent: #000000;
--border: #E0E0E0;
--primary: #FF6600;
--success: #8BC34A;
--surface: #F6F6F6;
--warning: #FFA000;
--secondary: #FFD100;
--text-muted: #999999;
--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.7: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.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Cheetos gray and neutral colors
The quiet part of the Cheetos palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Cheetos WhiteBackground
- HEX
- RGB
- HSL
- Cheetos Light GraySurface
- HEX
- RGB
- HSL
- Cheetos Border GrayBorder
- HEX
- RGB
- HSL
- Cheetos CharcoalText
- HEX
- RGB
- HSL
- Cheetos Medium GraySecondary text
- HEX
- RGB
- HSL
- Cheetos Muted GrayMuted text
- HEX
- RGB
- HSL
About Cheetos's colors
Cheetos uses a high-contrast, warm palette dominated by orange and yellow, supported by black for emphasis and white for clarity. The palette is designed for high visibility and instant brand recognition.
Orange and yellow are analogous, creating a cohesive and energetic feel.
Black provides strong contrast for legibility and emphasis.
White and light grays balance the vibrancy for UI clarity.
Psychology
Orange and yellow evoke feelings of fun, excitement, and appetite, aligning with the playful brand. Black adds boldness and authority, reinforcing the mascot's personality.
Evolution
The Cheetos palette has remained largely stable, with orange always as the anchor. Over time, accent colors have been refined for digital clarity and accessibility.
Where Cheetos uses each color
- Primary
Cheetos Orange is used for the logo, main buttons, and key packaging elements.
- Secondary
Cheetos Yellow highlights product flavor cues and secondary callouts on packaging and web.
- Accent
Cheetos Black is used for outlines, text, and the Chester Cheetah mascot.
- Backgrounds
Cheetos White and Light Gray are used for website backgrounds and product photography backdrops.
- Text
Charcoal and Medium Gray are used for body text and secondary information.
- Semantic
Success, warning, error, and info colors are used in digital interfaces for alerts and notifications.
Cheetos color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Cheetos orange is #FF6600. This color is used as the primary brand color across all touchpoints.
Cheetos Orange (#FF6600) is RGB(255, 102, 0) and CMYK(0, 60, 100, 0). These values ensure consistency in both digital and print applications.
Cheetos uses #F6F6F6 (Light Gray), #E0E0E0 (Border Gray), #222222 (Charcoal), #666666 (Medium Gray), and #999999 (Muted Gray) for backgrounds, borders, and text in digital interfaces.
Use Cheetos Orange (#FF6600) for primary actions and branding, with Yellow (#FFD100) as a highlight. Black (#000000) is reserved for text, outlines, and mascot details, while neutrals support UI clarity.
The secondary color is Cheetos Yellow, #FFD100, and the accent is Cheetos Black, #000000. 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 Cheetos's colors consistently when it generates UI.
Make something in the spirit of Cheetos
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.