Education Color Palette

Focused navy, a friendly mid-blue, clean paper white and one attention red for corrections. Anchors: #1D3557, #457B9D, #F1FAEE, #E63946.

educationlearningfriendly
#1D3557
#457B9D
#F1FAEE
#E63946
#969DB0
#1d3557 #457b9d #f1faee #e63946 #969db0
#1D3557 #457B9D #F1FAEE #E63946 #969DB0

Semantic roles

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

background#F1FAEE
surface#969DB0
text#1D3557
text-muted#457B9D
primary#E63946
secondary#457B9D
accent#969DB0

CSS variables 

:root {
  --background: #f1faee;
  --surface: #969db0;
  --text: #1d3557;
  --text-muted: #457b9d;
  --primary: #e63946;
  --secondary: #457b9d;
  --accent: #969db0;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#1D3557#457B9D#F1FAEE#E63946#969DB0
#1D3557
1.0
2.7
11.6
3.0
4.6
#457B9D
2.7
1.0
4.3
1.1
1.7
#F1FAEE
11.6
4.3
1.0
3.9
2.5
#E63946
3.0
1.1
3.9
1.0
1.5
#969DB0
4.6
1.7
2.5
1.5
1.0

Under deuteranopia

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

Colors in this palette

#1D3557
rgb(29, 53, 87)
#457B9D
rgb(69, 123, 157)
#F1FAEE
rgb(241, 250, 238)
#E63946
rgb(230, 57, 70)
#969DB0
rgb(150, 157, 176)

Similar palettes

Triadic Color Palette
Crimson Color Palette
Mountain Color Palette

FAQ

How do I use the education color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1D3557, #457B9D, #F1FAEE, #E63946, #969DB0.

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.