Dark Color Palette

Low-lightness surfaces with one luminous accent — dark mode and dramatic branding. Palette anchors: #0F172A, #1E293B, #334155.

darkmoody
#0F172A
#1E293B
#334155
#475569
#38BDF8
#0f172a #1e293b #334155 #475569 #38bdf8
#0F172A #1E293B #334155 #475569 #38BDF8

Semantic roles

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

background#38BDF8
surface#475569
text#0F172A
text-muted#1E293B
primary#1E293B
secondary#334155
accent#475569

CSS variables 

:root {
  --background: #38bdf8;
  --surface: #475569;
  --text: #0f172a;
  --text-muted: #1e293b;
  --primary: #1e293b;
  --secondary: #334155;
  --accent: #475569;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#0F172A#1E293B#334155#475569#38BDF8
#0F172A
1.0
1.2
1.7
2.4
8.3
#1E293B
1.2
1.0
1.4
1.9
6.8
#334155
1.7
1.4
1.0
1.4
4.8
#475569
2.4
1.9
1.4
1.0
3.5
#38BDF8
8.3
6.8
4.8
3.5
1.0

Under deuteranopia

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

Colors in this palette

#0F172A
rgb(15, 23, 42)
#1E293B
rgb(30, 41, 59)
#334155
rgb(51, 65, 85)
#475569
rgb(71, 85, 105)
#38BDF8
rgb(56, 189, 248)

Similar palettes

Dark Mode UI Palette
Space Color Palette
Charcoal Color Palette

FAQ

How do I use the dark color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0F172A, #1E293B, #334155, #475569, #38BDF8.

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.