ASOS color palette
EcommerceASOS uses a minimalist, monochromatic color palette centered around black and white, reflecting its fashion-forward, editorial brand identity. The color system emphasizes clarity and simplicity, with subtle grays for UI elements.
asos.comASOS colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- ASOS BlackPrimary0, 0, 0
- ASOS WhiteSecondary255, 255, 255
- ASOS Pink AccentAccent242, 106, 141
Surfaces
Page, cards and dividers.- ASOS WhiteBackground255, 255, 255
- ASOS Light GraySurface247, 247, 247
- ASOS Border GrayBorder229, 229, 229
Text
Three tiers of copy.- ASOS BlackText0, 0, 0
- ASOS Medium GraySecondary text118, 118, 118
- ASOS Muted GrayMuted text178, 178, 178
Semantic
Feedback and state colors.- ASOS Success GreenSuccess0, 135, 90
- ASOS Warning OrangeWarning245, 166, 35
- ASOS Error RedError208, 2, 27
- ASOS Info BlueInfo0, 118, 255
Use ASOS's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
asos-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0076FF;
--error: #D0021B;
--accent: #F26A8D;
--border: #E5E5E5;
--primary: #000000;
--success: #00875A;
--surface: #F7F7F7;
--warning: #F5A623;
--secondary: #FFFFFF;
--text-muted: #B2B2B2;
--background: #FFFFFF;
--text-primary: #000000;
--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
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
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2: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
2.0:1
Fail
ASOS gray and neutral colors
The quiet part of the ASOS palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- ASOS WhiteBackground
- HEX
- RGB
- HSL
- ASOS Light GraySurface
- HEX
- RGB
- HSL
- ASOS Border GrayBorder
- HEX
- RGB
- HSL
- ASOS BlackText
- HEX
- RGB
- HSL
- ASOS Medium GraySecondary text
- HEX
- RGB
- HSL
- ASOS Muted GrayMuted text
- HEX
- RGB
- HSL
About ASOS's colors
ASOS's palette is built on a high-contrast black and white scheme, with subtle gray tones for hierarchy and a pink accent for highlights. This approach ensures a clean, editorial feel that foregrounds product imagery.
Primary black contrasts with white backgrounds for clarity.
Grays create depth and separate UI elements.
Accent pink is reserved for highlights and calls to action.
Psychology
Black and white convey sophistication, authority, and timelessness, aligning with ASOS's fashion positioning. The pink accent adds a touch of vibrancy and modernity without overwhelming the minimal base.
Evolution
ASOS's color palette has remained largely stable, consistently using black and white as core brand colors. Occasional accent colors have been introduced for campaigns, but the monochrome foundation persists.
Where ASOS uses each color
- Primary
Used for logo, primary navigation, and main text.
- Secondary
Used for backgrounds, negative space, and secondary text.
- Accent
Used sparingly for CTAs, sale badges, and promotional highlights.
- Backgrounds
White and light gray backgrounds dominate product and content areas.
- Text
Black for primary text, medium gray for secondary, and muted gray for placeholder or disabled text.
- Semantic
Green, orange, red, and blue are used for status indicators such as success messages, warnings, errors, and informational banners.
ASOS color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary ASOS brand color is black, with the hex code #000000.
ASOS Black is #000000, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
ASOS uses several grays: #F7F7F7 for surfaces, #E5E5E5 for borders, #767676 for secondary text, and #B2B2B2 for muted text.
Use black and white as the dominant colors, with gray tones for UI structure and pink accent only for highlights or calls to action. Semantic colors are reserved for status messages and notifications.
The secondary color is ASOS White, #FFFFFF, and the accent is ASOS Pink Accent, #F26A8D. 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 ASOS's colors consistently when it generates UI.
Make something in the spirit of ASOS
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.