Dr Pepper color palette
Food & DrinkDr Pepper's color identity centers on its signature deep maroon, paired with crisp white and dark gray accents for contrast. The palette reflects the brand's heritage and bold flavor profile.
drpepper.comDr Pepper colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dr Pepper MaroonPrimary200, 16, 46
- Dr Pepper Deep MaroonSecondary124, 10, 30
- Dr Pepper WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Dr Pepper Light GrayBackground246, 246, 246
- Dr Pepper Surface GraySurface229, 229, 229
- Dr Pepper Border GrayBorder179, 179, 179
Text
Three tiers of copy.- Dr Pepper BlackText35, 31, 32
- Dr Pepper Deep MaroonSecondary text124, 10, 30
- Dr Pepper Muted GrayMuted text109, 110, 113
Semantic
Feedback and state colors.- Dr Pepper Success GreenSuccess75, 181, 67
- Dr Pepper Warning YellowWarning255, 184, 28
- Dr Pepper Error MaroonError200, 16, 46
- Dr Pepper Info BlueInfo0, 114, 206
Use Dr Pepper's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dr-pepper-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #C8102E;
--accent: #FFFFFF;
--border: #B3B3B3;
--primary: #C8102E;
--success: #4BB543;
--surface: #E5E5E5;
--warning: #FFB81C;
--secondary: #7C0A1E;
--text-muted: #6D6E71;
--background: #F6F6F6;
--text-primary: #231F20;
--text-secondary: #7C0A1E;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.7:1
Pass
Muted text on background
Needs 3:1 for large text
4.7:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
Dr Pepper background, border and text colors
The quiet part of the Dr Pepper palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dr Pepper Light GrayBackground
- HEX
- RGB
- HSL
- Dr Pepper Surface GraySurface
- HEX
- RGB
- HSL
- Dr Pepper Border GrayBorder
- HEX
- RGB
- HSL
- Dr Pepper BlackText
- HEX
- RGB
- HSL
- Dr Pepper Deep MaroonSecondary text
- HEX
- RGB
- HSL
- Dr Pepper Muted GrayMuted text
- HEX
- RGB
- HSL
About Dr Pepper's colors
Dr Pepper's palette is dominated by a rich maroon, conveying tradition and boldness, with white and gray for clarity and balance. The use of deep reds establishes a strong, recognizable presence.
Primary maroon is complemented by deep maroon for depth.
White and light gray provide contrast and readability.
Accent colors are used sparingly for semantic clarity.
Psychology
Maroon evokes feelings of richness, warmth, and nostalgia, aligning with Dr Pepper's classic image. The neutral grays and white support a clean, modern presentation.
Evolution
The maroon core has remained consistent for decades, reinforcing brand recognition. Minor adjustments have been made to supporting grays and whites to modernize digital and packaging applications.
Where Dr Pepper uses each color
- Primary
Used in the logo, major callouts, and product packaging.
- Secondary
Appears in backgrounds, gradients, and supporting graphics.
- Accent
Applied to text, highlights, and navigation elements.
- Backgrounds
Light gray backgrounds are used on web pages and app screens.
- Text
Primary black and deep maroon are used for headlines and body copy.
- Semantic
Success, warning, error, and info colors are reserved for alerts and notifications in digital products.
Dr Pepper color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Dr Pepper brand color is maroon, hex code #C8102E.
Dr Pepper Maroon (#C8102E) is RGB(200, 16, 46) and CMYK(0, 92, 77, 22).
Dr Pepper uses a range of grays: Light Gray (#F6F6F6), Surface Gray (#E5E5E5), Border Gray (#B3B3B3), and Muted Gray (#6D6E71) for UI and backgrounds.
Primary maroon (#C8102E) should dominate key brand elements, with supporting grays and white for backgrounds and text. Accent and semantic colors are used for emphasis and alerts.
The secondary color is Dr Pepper Deep Maroon, #7C0A1E, and the accent is Dr Pepper 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 Dr Pepper's colors consistently when it generates UI.
Make something in the spirit of Dr Pepper
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.