Healthcare Color Palette

Calm clinical blues on a pale ground — readable, reassuring and accessible at every text size. Anchors: #E8F4F8, #2A6F97, #61A5C2.

healthcaremedicalcalm
#E8F4F8
#2A6F97
#61A5C2
#F5FAFC
#284E69
#e8f4f8 #2a6f97 #61a5c2 #f5fafc #284e69
#E8F4F8 #2A6F97 #61A5C2 #F5FAFC #284E69

Semantic roles

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

background#F5FAFC
surface#E8F4F8
text#284E69
text-muted#2A6F97
primary#2A6F97
secondary#E8F4F8
accent#61A5C2

CSS variables 

:root {
  --background: #f5fafc;
  --surface: #e8f4f8;
  --text: #284e69;
  --text-muted: #2a6f97;
  --primary: #2a6f97;
  --secondary: #e8f4f8;
  --accent: #61a5c2;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#E8F4F8#2A6F97#61A5C2#F5FAFC#284E69
#E8F4F8
1.0
4.9
2.4
1.1
7.9
#2A6F97
4.9
1.0
2.0
5.2
1.6
#61A5C2
2.4
2.0
1.0
2.6
3.2
#F5FAFC
1.1
5.2
2.6
1.0
8.4
#284E69
7.9
1.6
3.2
8.4
1.0

Under deuteranopia

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

Colors in this palette

#E8F4F8
rgb(232, 244, 248)
#2A6F97
rgb(42, 111, 151)
#61A5C2
rgb(97, 165, 194)
#F5FAFC
rgb(245, 250, 252)
#284E69
rgb(40, 78, 105)

Similar palettes

Bedroom Color Palette
Cool Color Palette
Sage Green Color Palette

FAQ

How do I use the healthcare color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #E8F4F8, #2A6F97, #61A5C2, #F5FAFC, #284E69.

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.