Winter Color Palette

Frost white, slate, deep pine shadow and glacier blue — cold, quiet and clean. Anchors: #E8F1F5, #94A3B8, #334155, #0C4A6E.

wintercoldquiet
#E8F1F5
#94A3B8
#334155
#0C4A6E
#F5F9FA
#e8f1f5 #94a3b8 #334155 #0c4a6e #f5f9fa
#E8F1F5 #94A3B8 #334155 #0C4A6E #F5F9FA

Semantic roles

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

background#F5F9FA
surface#E8F1F5
text#334155
text-muted#0C4A6E
primary#0C4A6E
secondary#E8F1F5
accent#94A3B8

CSS variables 

:root {
  --background: #f5f9fa;
  --surface: #e8f1f5;
  --text: #334155;
  --text-muted: #0c4a6e;
  --primary: #0c4a6e;
  --secondary: #e8f1f5;
  --accent: #94a3b8;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#E8F1F5#94A3B8#334155#0C4A6E#F5F9FA
#E8F1F5
1.0
2.2
9.0
8.3
1.1
#94A3B8
2.2
1.0
4.0
3.7
2.4
#334155
9.0
4.0
1.0
1.1
9.8
#0C4A6E
8.3
3.7
1.1
1.0
8.9
#F5F9FA
1.1
2.4
9.8
8.9
1.0

Under deuteranopia

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

Colors in this palette

#E8F1F5
rgb(232, 241, 245)
#94A3B8
rgb(148, 163, 184)
#334155
rgb(51, 65, 85)
#0C4A6E
rgb(12, 74, 110)
#F5F9FA
rgb(245, 249, 250)

Similar palettes

Christmas Color Palette
Dark Mode UI Palette
Mountain Color Palette

FAQ

How do I use the winter color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #E8F1F5, #94A3B8, #334155, #0C4A6E, #F5F9FA.

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.