Chanel color palette
FashionChanel's color identity is defined by a timeless black and white palette, reflecting elegance, luxury, and simplicity. The brand uses deep black, crisp white, and subtle grays across its website and packaging.
chanel.comChanel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chanel BlackPrimary0, 0, 0
- Chanel WhiteSecondary255, 255, 255
- Chanel Silver GrayAccent179, 179, 179
Surfaces
Page, cards and dividers.- Chanel WhiteBackground255, 255, 255
- Chanel Light GraySurface247, 247, 247
- Chanel Pale GrayBorder229, 229, 229
Text
Three tiers of copy.- Chanel BlackText0, 0, 0
- Chanel Medium GraySecondary text102, 102, 102
- Chanel Silver GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Chanel EmeraldSuccess0, 153, 102
- Chanel GoldWarning255, 179, 0
- Chanel RedError208, 2, 27
- Chanel BlueInfo0, 85, 165
Use Chanel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chanel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0055A5;
--error: #D0021B;
--accent: #B3B3B3;
--border: #E5E5E5;
--primary: #000000;
--success: #009966;
--surface: #F7F7F7;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Chanel gray and neutral colors
The quiet part of the Chanel palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chanel WhiteBackground
- HEX
- RGB
- HSL
- Chanel Light GraySurface
- HEX
- RGB
- HSL
- Chanel Pale GrayBorder
- HEX
- RGB
- HSL
- Chanel BlackText
- HEX
- RGB
- HSL
- Chanel Medium GraySecondary text
- HEX
- RGB
- HSL
- Chanel Silver GrayMuted text
- HEX
- RGB
- HSL
About Chanel's colors
Chanel's palette is monochromatic, relying on the stark contrast between black and white, with subtle grays for depth. This approach underscores the brand's minimalist and luxurious ethos.
Black and white are used in high contrast for clarity.
Grays bridge the gap between black and white for UI elements.
Accent colors are used sparingly for functional signals.
Psychology
Black conveys sophistication, exclusivity, and timelessness, while white represents purity and modernity. The restrained use of color reinforces Chanel's aura of understated luxury.
Evolution
Chanel's core palette has remained virtually unchanged since the brand's inception, emphasizing consistency and heritage. Occasional accent colors are introduced for limited collections or campaigns, but the black and white foundation is constant.
Where Chanel uses each color
- Primary
Chanel Black (#000000) is used for the logo, navigation text, and major headings.
- Secondary
Chanel White (#FFFFFF) serves as the primary background and negative space.
- Accent
Chanel Silver Gray (#B3B3B3) appears in UI elements, dividers, and subtle highlights.
- Backgrounds
White and light gray backgrounds dominate web pages and product displays.
- Text
Primary text is black, with secondary and muted text in medium and silver grays.
- Semantic
Emerald, gold, red, and blue are reserved for status messages, alerts, and notifications.
Chanel color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Chanel brand color is black, with the official hex code #000000.
Chanel Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100).
Chanel uses several grays such as Chanel Silver Gray (#B3B3B3), Light Gray (#F7F7F7), and Pale Gray (#E5E5E5) for backgrounds, borders, and muted text.
The palette should emphasize black and white for primary elements, with grays for UI structure and accents, and reserved use of color for semantic status only. Always maintain high contrast and minimalism in layouts.
The secondary color is Chanel White, #FFFFFF, and the accent is Chanel Silver Gray, #B3B3B3. 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 Chanel's colors consistently when it generates UI.
Make something in the spirit of Chanel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.