Sage Green Color Palette

Sage green with its tints and shades, anchored by warm neutrals. Calm, muted and botanical.

sagegreencalm
#9CAF88
#C4CFB4
#6D7A5F
#E8E3D3
#4A5742
#9caf88 #c4cfb4 #6d7a5f #e8e3d3 #4a5742
#9CAF88 #C4CFB4 #6D7A5F #E8E3D3 #4A5742

Semantic roles

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

background#E8E3D3
surface#C4CFB4
text#4A5742
text-muted#6D7A5F
primary#9CAF88
secondary#C4CFB4
accent#6D7A5F

CSS variables 

:root {
  --background: #e8e3d3;
  --surface: #c4cfb4;
  --text: #4a5742;
  --text-muted: #6d7a5f;
  --primary: #9caf88;
  --secondary: #c4cfb4;
  --accent: #6d7a5f;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#9CAF88#C4CFB4#6D7A5F#E8E3D3#4A5742
#9CAF88
1.0
1.4
1.9
1.8
3.3
#C4CFB4
1.4
1.0
2.8
1.3
4.7
#6D7A5F
1.9
2.8
1.0
3.6
1.7
#E8E3D3
1.8
1.3
3.6
1.0
6.0
#4A5742
3.3
4.7
1.7
6.0
1.0

Under deuteranopia

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

Colors in this palette

#9CAF88
rgb(156, 175, 136)
#C4CFB4
rgb(196, 207, 180)
#6D7A5F
rgb(109, 122, 95)
#E8E3D3
rgb(232, 227, 211)
#4A5742
rgb(74, 87, 66)

Similar palettes

Forest Color Palette
Luxury Color Palette
Wedding Color Palette

FAQ

How do I use the sage green color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #9CAF88, #C4CFB4, #6D7A5F, #E8E3D3, #4A5742.

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.