Hermès color palette
FashionHermès is renowned for its iconic orange, a color that has become synonymous with luxury and heritage. The brand's color identity is defined by this signature orange, complemented by understated neutrals and elegant dark tones.
hermes.comHermès colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hermès OrangePrimary255, 114, 0
- Hermès CharcoalSecondary26, 26, 26
- Hermès WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Hermès CreamBackground247, 243, 239
- Hermès BeigeSurface237, 230, 223
- Hermès Light TaupeBorder214, 207, 200
Text
Three tiers of copy.- Hermès CharcoalText26, 26, 26
- Hermès Warm GraySecondary text110, 98, 87
- Hermès Muted TaupeMuted text168, 159, 150
Semantic
Feedback and state colors.- Hermès Olive GreenSuccess76, 154, 42
- Hermès AmberWarning255, 179, 0
- Hermès RedError192, 57, 43
- Hermès BlueInfo59, 107, 165
Use Hermès's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hermes-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B6BA5;
--error: #C0392B;
--accent: #FFFFFF;
--border: #D6CFC8;
--primary: #FF7200;
--success: #4C9A2A;
--surface: #EDE6DF;
--warning: #FFB300;
--secondary: #1A1A1A;
--text-muted: #A89F96;
--background: #F7F3EF;
--text-primary: #1A1A1A;
--text-secondary: #6E6257;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1: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.8: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.1:1
Fail
Hermès background, border and text colors
The quiet part of the Hermès palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hermès CreamBackground
- HEX
- RGB
- HSL
- Hermès BeigeSurface
- HEX
- RGB
- HSL
- Hermès Light TaupeBorder
- HEX
- RGB
- HSL
- Hermès CharcoalText
- HEX
- RGB
- HSL
- Hermès Warm GraySecondary text
- HEX
- RGB
- HSL
- Hermès Muted TaupeMuted text
- HEX
- RGB
- HSL
About Hermès's colors
Hermès Orange dominates the palette, evoking energy and exclusivity, while neutrals provide balance and sophistication. The color system is minimal, supporting the brand's timeless and luxurious image.
Primary orange is paired with deep charcoal for contrast.
Cream and beige backgrounds highlight product imagery.
Subtle taupes and grays are used for text and UI elements.
Psychology
Orange conveys warmth, creativity, and prestige, making it instantly recognizable. The supporting neutrals evoke calm, reliability, and understated elegance.
Evolution
The Hermès palette has remained largely unchanged for decades, maintaining its iconic orange as the centerpiece. Subtle adjustments to neutrals have modernized the UI while respecting tradition.
Where Hermès uses each color
- Primary
Hermès Orange is used for packaging, key accents, and call-to-action buttons.
- Secondary
Hermès Charcoal appears in navigation bars, footers, and primary text.
- Accent
Hermès White is used for backgrounds, negative space, and highlights.
- Backgrounds
Hermès Cream and Beige serve as main page backgrounds and product display areas.
- Text
Charcoal and Warm Gray are used for primary and secondary text, with Muted Taupe for less prominent information.
- Semantic
Olive Green, Amber, Red, and Blue are reserved for status indicators and alerts in digital interfaces.
Hermès color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hermès brand color hex code is #FF7200, known as Hermès Orange.
Hermès Orange is RGB(255, 114, 0) and CMYK(0, 55, 100, 0). The hex code is #FF7200.
Hermès uses Charcoal (#1A1A1A), Warm Gray (#6E6257), and Muted Taupe (#A89F96) for text and UI elements.
Use Hermès Orange (#FF7200) for key branding and accents, with neutrals for backgrounds and text to maintain clarity and luxury.
The secondary color is Hermès Charcoal, #1A1A1A, and the accent is Hermès White, #FFFFFF. 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 Hermès's colors consistently when it generates UI.
Make something in the spirit of Hermès
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.