KitKat color palette
Food & DrinkKitKat's brand identity is defined by its iconic red, paired with white and chocolate brown accents. The palette is bold and instantly recognizable across packaging and digital platforms.
kitkat.comKitKat colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- KitKat RedPrimary199, 10, 12
- KitKat WhiteSecondary255, 255, 255
- KitKat ChocolateAccent74, 44, 19
Surfaces
Page, cards and dividers.- KitKat Light GrayBackground245, 245, 245
- KitKat Pale GraySurface227, 227, 227
- KitKat Silver GrayBorder176, 176, 176
Text
Three tiers of copy.- KitKat Deep BlackText35, 31, 32
- KitKat ChocolateSecondary text74, 44, 19
- KitKat Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- KitKat GreenSuccess122, 193, 67
- KitKat YellowWarning255, 184, 28
- KitKat RedError199, 10, 12
- KitKat BlueInfo0, 136, 206
Use KitKat's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kitkat-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0088CE;
--error: #C70A0C;
--accent: #4A2C13;
--border: #B0B0B0;
--primary: #C70A0C;
--success: #7AC143;
--surface: #E3E3E3;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #757575;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #4A2C13;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.9:1
Pass
Muted text on background
Needs 3:1 for large text
4.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.6:1
Pass
KitKat background, border and text colors
The quiet part of the KitKat palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- KitKat Light GrayBackground
- HEX
- RGB
- HSL
- KitKat Pale GraySurface
- HEX
- RGB
- HSL
- KitKat Silver GrayBorder
- HEX
- RGB
- HSL
- KitKat Deep BlackText
- HEX
- RGB
- HSL
- KitKat ChocolateSecondary text
- HEX
- RGB
- HSL
- KitKat Muted GrayMuted text
- HEX
- RGB
- HSL
About KitKat's colors
KitKat's palette is dominated by a vivid red, contrasted with white and chocolate brown, evoking appetite and brand recognition. The use of bold, high-contrast colors ensures strong visibility in both packaging and digital media.
Red and white provide strong contrast for legibility.
Chocolate brown accentuates the confectionery theme.
Neutral grays support UI clarity and hierarchy.
Psychology
Red stimulates appetite and excitement, making it effective for food branding. The chocolate brown reinforces the product's flavor and indulgence.
Evolution
KitKat's red has remained consistent since its early days, maintaining strong brand equity. Minor adjustments to supporting neutrals and accent colors have occurred for digital clarity.
Where KitKat uses each color
- Primary
KitKat Red is used on packaging, website headers, and primary call-to-action buttons.
- Secondary
KitKat White appears in logos, text, and as a background for contrast.
- Accent
KitKat Chocolate is featured in product imagery and accent details.
- Backgrounds
KitKat Light Gray and Pale Gray are used for website backgrounds and UI surfaces.
- Text
KitKat Deep Black is used for primary text, with Chocolate and Muted Gray for secondary and muted text.
- Semantic
KitKat Green, Yellow, and Blue are used for success, warning, and informational UI states respectively.
KitKat color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official KitKat brand red is #C70A0C. This color is used prominently across all KitKat branding.
KitKat Red (#C70A0C) in RGB is 199, 10, 12 and in CMYK is 0, 95, 94, 22. These values ensure color consistency across print and digital.
KitKat uses KitKat Light Gray (#F5F5F5), Pale Gray (#E3E3E3), and Silver Gray (#B0B0B0) for backgrounds and UI elements. These neutrals support readability and highlight the primary red.
Use KitKat Red (#C70A0C) for primary actions and branding, with White (#FFFFFF) for contrast. Chocolate (#4A2C13) and neutral grays provide depth and support in UI and packaging.
The secondary color is KitKat White, #FFFFFF, and the accent is KitKat Chocolate, #4A2C13. Together with the primary they make up the three brand colors at the top of this page.
6 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 KitKat's colors consistently when it generates UI.
Make something in the spirit of KitKat
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.