Coca-Cola Zero color palette
Food & DrinkCoca-Cola Zero's color identity is defined by a bold black, accented with the iconic Coca-Cola red and crisp white. The palette is minimalist, reflecting the zero sugar positioning and a modern, premium feel.
coca-cola.comCoca-Cola Zero colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Coke Zero BlackPrimary0, 0, 0
- Coca-Cola RedSecondary228, 26, 28
- Coke Zero WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Zero Deep BlackBackground24, 24, 24
- Zero Surface GraySurface34, 34, 34
- Zero Border GrayBorder57, 57, 57
Text
Three tiers of copy.- Zero Text WhiteText255, 255, 255
- Zero Text GraySecondary text179, 179, 179
- Zero Muted GrayMuted text128, 128, 128
Semantic
Feedback and state colors.- Zero Success GreenSuccess67, 176, 42
- Zero Warning YellowWarning255, 199, 44
- Zero Error RedError228, 26, 28
- Zero Info BlueInfo0, 159, 218
Use Coca-Cola Zero's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
coca-cola-zero-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #E41A1C;
--accent: #FFFFFF;
--border: #393939;
--primary: #000000;
--success: #43B02A;
--surface: #222222;
--warning: #FFC72C;
--secondary: #E41A1C;
--text-muted: #808080;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
Coca-Cola Zero gray, dark and neutral colors
Coca-Cola Zero runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Zero Deep BlackBackground
- HEX
- RGB
- HSL
- Zero Surface GraySurface
- HEX
- RGB
- HSL
- Zero Border GrayBorder
- HEX
- RGB
- HSL
- Zero Text WhiteText
- HEX
- RGB
- HSL
- Zero Text GraySecondary text
- HEX
- RGB
- HSL
- Zero Muted GrayMuted text
- HEX
- RGB
- HSL
About Coca-Cola Zero's colors
Coca-Cola Zero's palette uses high-contrast black, red, and white to create a modern, bold look. The colors are simple and direct, emphasizing clarity and brand recognition.
Primary black contrasts with signature red for impact.
White is used for clarity and legibility.
Neutral grays support the bold core colors in UI elements.
Psychology
Black conveys sophistication and a sense of zero sugar, while red maintains the energetic, iconic Coca-Cola brand presence. White and gray tones bring balance and modernity.
Evolution
The palette has remained consistent since Coca-Cola Zero's launch, with black as the dominant color and red as the accent. Minor adjustments to gray tones have been made for digital accessibility.
Where Coca-Cola Zero uses each color
- Primary
Coke Zero Black is used for backgrounds, packaging, and main navigation.
- Secondary
Coca-Cola Red appears in logos, call-to-action buttons, and key highlights.
- Accent
Coke Zero White is used for text, icons, and logo details.
- Backgrounds
Zero Deep Black is the main background color on digital and physical assets.
- Text
Zero Text White and Zero Text Gray are used for primary and secondary text on dark backgrounds.
- Semantic
Zero Success Green, Warning Yellow, Error Red, and Info Blue are reserved for system feedback and notifications in digital interfaces.
Coca-Cola Zero color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Coca-Cola Zero brand color is Coke Zero Black, hex code #000000.
Coke Zero Black is RGB(0, 0, 0) and CMYK(0, 0, 0, 100). The hex code is #000000.
Coca-Cola Zero uses Zero Surface Gray (#222222), Zero Border Gray (#393939), and Zero Text Gray (#B3B3B3) for UI backgrounds, borders, and secondary text.
Use Coke Zero Black (#000000) for dominant backgrounds, Coca-Cola Red (#E41A1C) for accents and highlights, and Coke Zero White (#FFFFFF) for text and icons to maintain brand consistency.
The secondary color is Coca-Cola Red, #E41A1C, and the accent is Coke Zero White, #FFFFFF. 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 Coca-Cola Zero's colors consistently when it generates UI.
Make something in the spirit of Coca-Cola Zero
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.