Dunkin' color palette
Food & DrinkDunkin' features a bold and energetic color palette centered around its signature orange and pink, reflecting its fun and approachable brand identity. The palette is complemented by dark brown and neutral tones for balance and legibility.
dunkindonuts.comDunkin' colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dunkin' OrangePrimary255, 103, 31
- Dunkin' PinkSecondary225, 19, 131
- Dunkin' BrownAccent82, 46, 31
Surfaces
Page, cards and dividers.- Dunkin' WhiteBackground255, 255, 255
- Dunkin' Light GraySurface245, 245, 245
- Dunkin' Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Dunkin' BlackText26, 26, 26
- Dunkin' BrownSecondary text82, 46, 31
- Dunkin' Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Dunkin' GreenSuccess67, 176, 42
- Dunkin' YellowWarning255, 177, 0
- Dunkin' RedError225, 19, 19
- Dunkin' BlueInfo0, 159, 218
Use Dunkin''s colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dunkin-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #E11313;
--accent: #522E1F;
--border: #E0E0E0;
--primary: #FF671F;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFB100;
--secondary: #E11383;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #522E1F;
}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.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
10.9:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.2:1
Pass
Dunkin' background, border and text colors
The quiet part of the Dunkin' palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dunkin' WhiteBackground
- HEX
- RGB
- HSL
- Dunkin' Light GraySurface
- HEX
- RGB
- HSL
- Dunkin' Border GrayBorder
- HEX
- RGB
- HSL
- Dunkin' BlackText
- HEX
- RGB
- HSL
- Dunkin' BrownSecondary text
- HEX
- RGB
- HSL
- Dunkin' Muted GrayMuted text
- HEX
- RGB
- HSL
About Dunkin''s colors
Dunkin's color system uses high-contrast, saturated hues to create a lively and inviting brand presence. The orange and pink pairing is distinctive and immediately recognizable in the food and beverage sector.
Orange and pink are analogous, creating harmony.
Brown provides grounding contrast.
Neutrals ensure readability and balance.
Psychology
Orange conveys energy, warmth, and friendliness, while pink adds a playful and approachable touch. Brown suggests reliability and comfort, reinforcing the brand's coffee heritage.
Evolution
Dunkin's palette has remained largely consistent since its 2002 rebrand, with minor refinements to the orange and pink tones for digital clarity. The use of brown and expanded neutrals has increased in recent years for improved UI accessibility.
Where Dunkin' uses each color
- Primary
Dunkin' Orange is used for logos, primary buttons, and key brand elements.
- Secondary
Dunkin' Pink appears in secondary buttons, highlights, and packaging accents.
- Accent
Dunkin' Brown is used for text, icons, and coffee-related graphics.
- Backgrounds
White and light gray backgrounds are used for app screens, web pages, and packaging.
- Text
Black and brown are used for primary and secondary text across digital and print materials.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and informational UI elements.
Dunkin' color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Dunkin' primary brand color is orange, hex code #FF671F.
Dunkin' Orange is #FF671F, which is RGB(255, 103, 31) and CMYK(0, 60, 88, 0).
Dunkin' uses #1A1A1A (Dunkin' Black), #522E1F (Dunkin' Brown), and #F5F5F5 (Dunkin' Light Gray) for UI backgrounds and text.
Use Dunkin' Orange (#FF671F) for primary actions and branding, with pink (#E11383) as a secondary accent. Neutrals and brown provide contrast and support for text and backgrounds.
The secondary color is Dunkin' Pink, #E11383, and the accent is Dunkin' Brown, #522E1F. 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 Dunkin''s colors consistently when it generates UI.
Make something in the spirit of Dunkin'
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.