Zalando color palette
EcommerceZalando's color identity is defined by its distinctive orange paired with neutral greys and black, creating a bold yet minimalistic look. The palette is optimized for ecommerce clarity and brand recognition.
zalando.comZalando colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Zalando OrangePrimary255, 105, 0
- Zalando BlackSecondary35, 35, 35
- Zalando Light GreyAccent245, 245, 245
Surfaces
Page, cards and dividers.- Zalando WhiteBackground255, 255, 255
- Zalando Surface GreySurface242, 242, 242
- Zalando Border GreyBorder224, 224, 224
Text
Three tiers of copy.- Zalando Black TextText35, 35, 35
- Zalando Medium Grey TextSecondary text118, 118, 118
- Zalando Muted Grey TextMuted text179, 179, 179
Semantic
Feedback and state colors.- Zalando Success GreenSuccess0, 138, 5
- Zalando Warning YellowWarning255, 184, 0
- Zalando Error RedError208, 2, 27
- Zalando Info BlueInfo0, 116, 217
Use Zalando's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
zalando-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0074D9;
--error: #D0021B;
--accent: #F5F5F5;
--border: #E0E0E0;
--primary: #FF6900;
--success: #008A05;
--surface: #F2F2F2;
--warning: #FFB800;
--secondary: #232323;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #232323;
--text-secondary: #767676;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
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
Zalando gray and neutral colors
The quiet part of the Zalando palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Zalando WhiteBackground
- HEX
- RGB
- HSL
- Zalando Surface GreySurface
- HEX
- RGB
- HSL
- Zalando Border GreyBorder
- HEX
- RGB
- HSL
- Zalando Black TextText
- HEX
- RGB
- HSL
- Zalando Medium Grey TextSecondary text
- HEX
- RGB
- HSL
- Zalando Muted Grey TextMuted text
- HEX
- RGB
- HSL
About Zalando's colors
Zalando's palette uses a vibrant orange for instant brand recognition, balanced by neutral greys and white for a clean, modern interface. The colors are chosen for clarity and accessibility in ecommerce contexts.
Primary orange is contrasted with deep black for emphasis.
Light greys and white provide neutral backgrounds for product imagery.
Accent colors are used sparingly for status and feedback.
Psychology
The orange evokes energy, friendliness, and approachability, making the brand stand out in the ecommerce space. Neutral tones ensure trust and readability, supporting a seamless shopping experience.
Evolution
Zalando's core palette has remained consistent, with orange as the signature color since its inception. Over time, the supporting greys have been refined for improved accessibility and modern UI needs.
Where Zalando uses each color
- Primary
Used for call-to-action buttons, highlights, and key brand elements across the website and app.
- Secondary
Appears in navigation bars, footers, and as text color for maximum contrast.
- Accent
Used for backgrounds of cards, overlays, and subtle UI elements.
- Backgrounds
White is the main background for product pages and listings.
- Text
Primary black is used for main headlines and body text; medium and muted greys for secondary and disabled text.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational messages respectively.
Zalando color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Zalando primary color is #FF6900, known as Zalando Orange. This color is used for key brand and UI highlights.
The RGB value for Zalando Orange (#FF6900) is 255, 105, 0. In CMYK, it is approximately 0, 59, 100, 0.
Zalando uses #232323 (Zalando Black), #767676 (Medium Grey), and #F5F5F5 (Light Grey) as its main neutral and dark tones. These are used for text, backgrounds, and UI surfaces.
Use #FF6900 for primary actions and highlights, with neutrals like #232323 and #F5F5F5 for backgrounds and text. Semantic colors are reserved for status indicators and feedback messages.
The secondary color is Zalando Black, #232323, and the accent is Zalando Light Grey, #F5F5F5. Together with the primary they make up the three brand colors at the top of this page.
3 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 Zalando's colors consistently when it generates UI.
Make something in the spirit of Zalando
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.