Luxury Color Palette

Black, charcoal and antique gold. The classic high-end combination — restraint plus a metallic accent.

luxuryelegantdark
#1C1C1C
#2E2E2E
#C9A227
#8C6D2F
#F5EFE0
#1c1c1c #2e2e2e #c9a227 #8c6d2f #f5efe0
#1C1C1C #2E2E2E #C9A227 #8C6D2F #F5EFE0

Semantic roles

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

background#F5EFE0
surface#C9A227
text#1C1C1C
text-muted#2E2E2E
primary#C9A227
secondary#2E2E2E
accent#8C6D2F

CSS variables

:root {
  --background: #f5efe0;
  --surface: #c9a227;
  --text: #1c1c1c;
  --text-muted: #2e2e2e;
  --primary: #c9a227;
  --secondary: #2e2e2e;
  --accent: #8c6d2f;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#1C1C1C#2E2E2E#C9A227#8C6D2F#F5EFE0
#1C1C1C
1.0
1.3
7.0
3.5
14.9
#2E2E2E
1.3
1.0
5.6
2.8
11.8
#C9A227
7.0
5.6
1.0
2.0
2.1
#8C6D2F
3.5
2.8
2.0
1.0
4.2
#F5EFE0
14.9
11.8
2.1
4.2
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 luxury color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1C1C1C, #2E2E2E, #C9A227, #8C6D2F, #F5EFE0.

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.