H&M color palette
FashionH&M's color identity is defined by its iconic vivid red, paired with a minimalistic palette of white, black, and neutral grays. This straightforward system supports the brand's modern, accessible fashion positioning.
www2.hm.comH&M colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- H&M RedPrimary229, 0, 16
- H&M WhiteSecondary255, 255, 255
- H&M BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- H&M Light GrayBackground247, 247, 247
- H&M White SurfaceSurface255, 255, 255
- H&M Soft GrayBorder204, 204, 204
Text
Three tiers of copy.- H&M CharcoalText34, 34, 34
- H&M Medium GraySecondary text111, 111, 111
- H&M Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- H&M Success GreenSuccess60, 118, 61
- H&M Warning YellowWarning255, 193, 7
- H&M Error RedError211, 47, 47
- H&M Info BlueInfo25, 118, 210
Use H&M's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
handm-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #000000;
--border: #CCCCCC;
--primary: #E50010;
--success: #3C763D;
--surface: #FFFFFF;
--warning: #FFC107;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #6F6F6F;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0: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.5:1
Fail
H&M gray and neutral colors
The quiet part of the H&M palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- H&M Light GrayBackground
- HEX
- RGB
- HSL
- H&M White SurfaceSurface
- HEX
- RGB
- HSL
- H&M Soft GrayBorder
- HEX
- RGB
- HSL
- H&M CharcoalText
- HEX
- RGB
- HSL
- H&M Medium GraySecondary text
- HEX
- RGB
- HSL
- H&M Muted GrayMuted text
- HEX
- RGB
- HSL
About H&M's colors
H&M's palette centers on a bold red, contrasted by neutral whites and grays for clarity and accessibility. The supporting colors provide clear visual hierarchy and reinforce a modern, minimal look.
Primary red is used for branding and key actions.
Neutrals provide structure and background.
Accent black and grays support text and UI elements.
Psychology
The red conveys energy, excitement, and approachability, aligning with H&M's fast-fashion ethos. Neutral tones ensure the red stands out and maintain a clean, inviting interface.
Evolution
H&M's color palette has remained largely stable, with the red and white combination being a core part of its identity for decades. Minor adjustments have been made to gray tones for digital clarity.
Where H&M uses each color
- Primary
H&M Red appears in the logo, call-to-action buttons, and promotional banners.
- Secondary
H&M White is used for backgrounds, surfaces, and product imagery.
- Accent
H&M Black is used for navigation text, icons, and some headings.
- Backgrounds
H&M Light Gray is used as the main page background for a soft, neutral feel.
- Text
H&M Charcoal and Medium Gray are used for primary and secondary text across the site.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for system messages and status indicators.
H&M color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official H&M primary color is #E50010, known as H&M Red. This is used for the logo and key brand elements.
H&M Red (#E50010) in RGB is (229, 0, 16) and in CMYK is approximately (0, 100, 93, 10). Always use the hex #E50010 for digital applications.
H&M uses a range of grays including H&M Light Gray (#F7F7F7), Soft Gray (#CCCCCC), and Charcoal (#222222) for backgrounds, borders, and text. These ensure clarity and contrast in the interface.
Use H&M Red (#E50010) for branding and calls to action, with neutrals and black for backgrounds and text. Semantic colors are reserved for system feedback and status messages.
The secondary color is H&M White, #FFFFFF, and the accent is H&M Black, #000000. 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 H&M's colors consistently when it generates UI.
Make something in the spirit of H&M
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.