Dior color palette
FashionDior's color identity is defined by a refined monochrome palette, anchored by deep black and elegant shades of white and gray. The brand's visual system emphasizes timeless luxury and understated sophistication.
dior.comDior colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dior BlackPrimary0, 0, 0
- Dior WhiteSecondary255, 255, 255
- Dior Silver GrayAccent182, 182, 182
Surfaces
Page, cards and dividers.- Dior Light GrayBackground247, 247, 247
- Dior Pale GraySurface229, 229, 229
- Dior Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Dior Text BlackText0, 0, 0
- Dior Medium GraySecondary text102, 102, 102
- Dior Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Dior Success GreenSuccess0, 117, 74
- Dior Warning GoldWarning179, 139, 0
- Dior Error RedError176, 0, 32
- Dior Info BlueInfo0, 83, 159
Use Dior's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dior-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00539F;
--error: #B00020;
--accent: #B6B6B6;
--border: #D1D1D1;
--primary: #000000;
--success: #00754A;
--surface: #E5E5E5;
--warning: #B38B00;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #000000;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Dior gray and neutral colors
The quiet part of the Dior palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dior Light GrayBackground
- HEX
- RGB
- HSL
- Dior Pale GraySurface
- HEX
- RGB
- HSL
- Dior Border GrayBorder
- HEX
- RGB
- HSL
- Dior Text BlackText
- HEX
- RGB
- HSL
- Dior Medium GraySecondary text
- HEX
- RGB
- HSL
- Dior Muted GrayMuted text
- HEX
- RGB
- HSL
About Dior's colors
Dior's palette relies on a monochrome foundation, using black, white, and subtle grays to evoke timelessness and elegance. Accent colors are used sparingly for clarity and emphasis.
Primary black contrasts with white for high readability.
Grays bridge the gap between black and white, softening the interface.
Accent metallics and muted colors are reserved for functional or status indications.
Psychology
Black and white communicate luxury, authority, and simplicity, reinforcing Dior's high-end positioning. The restrained use of color supports a sense of exclusivity and refinement.
Evolution
Dior's color palette has remained largely stable, consistently focusing on monochrome tones. Occasional subtle metallics or muted colors have been introduced for digital clarity and functional UI states.
Where Dior uses each color
- Primary
Dior Black is used for logos, primary navigation, and key headlines.
- Secondary
Dior White is the primary background for web pages and product displays.
- Accent
Dior Silver Gray is used for subtle highlights, icons, and UI accents.
- Backgrounds
Dior Light Gray appears as the main background in sections and product grids.
- Text
Dior Text Black and Medium Gray are used for body copy and secondary information.
- Semantic
Success Green, Warning Gold, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Dior color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Dior primary color hex code is #000000, known as Dior Black. This color is central to the brand's visual identity.
Dior Black (#000000) has an RGB value of 0, 0, 0 and a CMYK value of 0, 0, 0, 100. These values ensure deep, true black in both digital and print applications.
Dior uses a range of grays including Dior Silver Gray (#B6B6B6), Dior Light Gray (#F7F7F7), and Dior Medium Gray (#666666). These neutrals are essential for backgrounds, borders, and secondary text.
The palette should prioritize monochrome tones, with accents and semantic colors used sparingly for emphasis and clarity. Always use the exact hex codes as specified for brand consistency.
The secondary color is Dior White, #FFFFFF, and the accent is Dior Silver Gray, #B6B6B6. 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 Dior's colors consistently when it generates UI.
Make something in the spirit of Dior
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.