Zara color palette
FashionZara's color identity is defined by a minimalist, monochromatic palette centered on black and white, reflecting its modern and timeless fashion ethos. The brand utilizes subtle gray tones for UI elements and text, maintaining a clean and sophisticated appearance.
zara.comZara colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Zara BlackPrimary0, 0, 0
- Zara WhiteSecondary255, 255, 255
- Zara Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- Zara WhiteBackground255, 255, 255
- Zara Light GraySurface245, 245, 245
- Zara Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Zara BlackText0, 0, 0
- Zara Medium GraySecondary text102, 102, 102
- Zara Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Zara Success GreenSuccess0, 135, 90
- Zara Warning YellowWarning226, 180, 0
- Zara Error RedError176, 0, 32
- Zara Info BlueInfo25, 118, 210
Use Zara's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
zara-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #B00020;
--accent: #F5F5F5;
--border: #E5E5E5;
--primary: #000000;
--success: #00875A;
--surface: #F5F5F5;
--warning: #E2B400;
--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.3: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.3: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
1.9:1
Fail
Zara gray and neutral colors
The quiet part of the Zara palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Zara WhiteBackground
- HEX
- RGB
- HSL
- Zara Light GraySurface
- HEX
- RGB
- HSL
- Zara Border GrayBorder
- HEX
- RGB
- HSL
- Zara BlackText
- HEX
- RGB
- HSL
- Zara Medium GraySecondary text
- HEX
- RGB
- HSL
- Zara Muted GrayMuted text
- HEX
- RGB
- HSL
About Zara's colors
Zara's palette is rooted in monochrome, emphasizing clarity and timelessness. The restrained use of color supports a focus on product imagery and content.
Primary black and white create strong contrast.
Grays are used for hierarchy and subtlety.
Accent colors are reserved for functional UI states.
Psychology
Black and white convey sophistication, neutrality, and modernity, aligning with Zara's brand image. The minimal palette keeps the shopping experience distraction-free and elegant.
Evolution
Zara's palette has remained consistent, with black and white always at the core. Minor adjustments to gray tones have been made to enhance digital readability and accessibility.
Where Zara uses each color
- Primary
Used for logo, navigation text, and primary headlines.
- Secondary
Applied to backgrounds and product imagery frames.
- Accent
Used for UI backgrounds, cards, and subtle highlights.
- Backgrounds
White dominates page backgrounds for a clean look.
- Text
Black for primary text, medium and muted grays for secondary and disabled text.
- Semantic
Green, yellow, red, and blue are used for status indicators and notifications.
Zara color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Zara primary color hex code is #000000. This is used for the logo and main text.
Zara Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). These values are standard for pure black.
Zara uses several gray tones, including Zara Light Gray (#F5F5F5), Zara Border Gray (#E5E5E5), Zara Medium Gray (#666666), and Zara Muted Gray (#B3B3B3). These provide subtle contrast for backgrounds, borders, and secondary text.
The palette should maintain a minimalist, monochrome look with color reserved for functional UI states. Primary black and white should dominate, with grays supporting hierarchy and clarity.
The secondary color is Zara White, #FFFFFF, and the accent is Zara Light Gray, #F5F5F5. 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 Zara's colors consistently when it generates UI.
Make something in the spirit of Zara
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.