Fashion Color Palette

Navy, dusty pink and ivory — an editorial mix that photographs well on fabric and skin tones. Anchors: #1B2A4A, #D8A7B1, #F5F0E6.

fashionappareleditorial
#1B2A4A
#D8A7B1
#F5F0E6
#9397A9
#8E7079
#1b2a4a #d8a7b1 #f5f0e6 #9397a9 #8e7079
#1B2A4A #D8A7B1 #F5F0E6 #9397A9 #8E7079

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#F5F0E6
surface#D8A7B1
text#1B2A4A
text-muted#8E7079
primary#D8A7B1
secondary#9397A9
accent#8E7079

CSS variables

:root {
  --background: #f5f0e6;
  --surface: #d8a7b1;
  --text: #1b2a4a;
  --text-muted: #8e7079;
  --primary: #d8a7b1;
  --secondary: #9397a9;
  --accent: #8e7079;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#1B2A4A#D8A7B1#F5F0E6#9397A9#8E7079
#1B2A4A
1.0
6.8
12.5
4.9
3.2
#D8A7B1
6.8
1.0
1.8
1.4
2.1
#F5F0E6
12.5
1.8
1.0
2.5
3.9
#9397A9
4.9
1.4
2.5
1.0
1.5
#8E7079
3.2
2.1
3.9
1.5
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

Similar palettes

FAQ

How do I use the fashion color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1B2A4A, #D8A7B1, #F5F0E6, #9397A9, #8E7079.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.