Mountain Color Palette

Granite, scree, snowfield white and alpine-lake blue — a disciplined cool stack. Anchors: #475569, #94A3B8, #E2E8F0, #1E3A5F.

mountainalpinecool
#475569
#94A3B8
#E2E8F0
#1E3A5F
#A8AEB9
#475569 #94a3b8 #e2e8f0 #1e3a5f #a8aeb9
#475569 #94A3B8 #E2E8F0 #1E3A5F #A8AEB9

Semantic roles

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

background#E2E8F0
surface#A8AEB9
text#1E3A5F
text-muted#475569
primary#475569
secondary#94A3B8
accent#A8AEB9

CSS variables 

:root {
  --background: #e2e8f0;
  --surface: #a8aeb9;
  --text: #1e3a5f;
  --text-muted: #475569;
  --primary: #475569;
  --secondary: #94a3b8;
  --accent: #a8aeb9;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#475569#94A3B8#E2E8F0#1E3A5F#A8AEB9
#475569
1.0
3.0
6.2
1.5
3.4
#94A3B8
3.0
1.0
2.1
4.5
1.1
#E2E8F0
6.2
2.1
1.0
9.3
1.8
#1E3A5F
1.5
4.5
9.3
1.0
5.2
#A8AEB9
3.4
1.1
1.8
5.2
1.0

Under deuteranopia

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

Colors in this palette

#475569
rgb(71, 85, 105)
#94A3B8
rgb(148, 163, 184)
#E2E8F0
rgb(226, 232, 240)
#1E3A5F
rgb(30, 58, 95)
#A8AEB9
rgb(168, 174, 185)

Similar palettes

Cool Gray Color Palette
Dove Gray Color Palette
Fog Color Palette

FAQ

How do I use the mountain color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #475569, #94A3B8, #E2E8F0, #1E3A5F, #A8AEB9.

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.