Diet Coke color palette
Food & DrinkDiet Coke's color identity centers on its iconic silver, red, and black palette, reflecting a modern, crisp, and minimalist aesthetic. The brand uses these colors consistently across packaging, digital, and advertising materials.
dietcoke.comDiet Coke colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Diet Coke RedPrimary200, 16, 46
- Diet Coke SilverSecondary167, 169, 172
- Diet Coke BlackAccent35, 31, 32
Surfaces
Page, cards and dividers.- Diet Coke Light GrayBackground245, 245, 245
- Diet Coke WhiteSurface255, 255, 255
- Diet Coke Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Diet Coke BlackText35, 31, 32
- Diet Coke Medium GraySecondary text109, 110, 113
- Diet Coke SilverMuted text167, 169, 172
Semantic
Feedback and state colors.- Diet Coke Success GreenSuccess122, 193, 67
- Diet Coke Warning YellowWarning255, 194, 14
- Diet Coke RedError200, 16, 46
- Diet Coke Info BlueInfo0, 181, 226
Use Diet Coke's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
diet-coke-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B5E2;
--error: #C8102E;
--accent: #231F20;
--border: #D1D3D4;
--primary: #C8102E;
--success: #7AC143;
--surface: #FFFFFF;
--warning: #FFC20E;
--secondary: #A7A9AC;
--text-muted: #A7A9AC;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Diet Coke gray and neutral colors
The quiet part of the Diet Coke palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Diet Coke Light GrayBackground
- HEX
- RGB
- HSL
- Diet Coke WhiteSurface
- HEX
- RGB
- HSL
- Diet Coke Border GrayBorder
- HEX
- RGB
- HSL
- Diet Coke BlackText
- HEX
- RGB
- HSL
- Diet Coke Medium GraySecondary text
- HEX
- RGB
- HSL
- Diet Coke SilverMuted text
- HEX
- RGB
- HSL
About Diet Coke's colors
Diet Coke's palette is built on a triad of silver, red, and black, evoking modernity and clarity. The restrained use of color emphasizes the brand's crisp, light positioning.
Red is used for impactful highlights and branding.
Silver dominates as the background and core identity.
Black and gray tones provide structure and contrast.
Psychology
Red signals energy and draws attention, while silver suggests sophistication and lightness. Black and gray tones add clarity and a premium feel.
Evolution
Diet Coke's palette has remained largely stable since its 1982 launch, with silver and red as core elements. Minor adjustments have been made for digital clarity and accessibility.
Where Diet Coke uses each color
- Primary
Diet Coke Red is used for logos, call-to-action buttons, and key highlights.
- Secondary
Diet Coke Silver serves as the main background on packaging and digital assets.
- Accent
Diet Coke Black is used for text, outlines, and navigation elements.
- Backgrounds
Diet Coke Light Gray and White are used for backgrounds in web and print layouts.
- Text
Diet Coke Black and Medium Gray are used for primary and secondary text.
- Semantic
Green, yellow, red, and blue are used for status indicators and alerts in digital interfaces.
Diet Coke color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Diet Coke brand red is #C8102E, used for logos and key highlights.
Diet Coke Red (#C8102E) is RGB(200, 16, 46) and CMYK(2, 100, 85, 6).
Diet Coke uses several grays: Silver (#A7A9AC), Border Gray (#D1D3D4), and Medium Gray (#6D6E71) for backgrounds, borders, and secondary text.
Use Diet Coke Red (#C8102E) for primary branding and highlights, Silver (#A7A9AC) for backgrounds, and Black (#231F20) for text and accents. Maintain high contrast for readability and brand consistency.
The secondary color is Diet Coke Silver, #A7A9AC, and the accent is Diet Coke Black, #231F20. 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 Diet Coke's colors consistently when it generates UI.
Make something in the spirit of Diet Coke
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.