Analogous Color Palette

Neighboring hues (≈30° apart) from the same side of the wheel — naturally harmonious, never jarring. Palette anchors: #2E7D32, #43A047, #66BB6A.

analogousharmonious
#2E7D32
#43A047
#66BB6A
#AED581
#8BC34A
#2e7d32 #43a047 #66bb6a #aed581 #8bc34a
#2E7D32 #43A047 #66BB6A #AED581 #8BC34A

Semantic roles

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

background#AED581
surface#8BC34A
text#2E7D32
text-muted#43A047
primary#8BC34A
secondary#43A047
accent#66BB6A

CSS variables 

:root {
  --background: #aed581;
  --surface: #8bc34a;
  --text: #2e7d32;
  --text-muted: #43a047;
  --primary: #8bc34a;
  --secondary: #43a047;
  --accent: #66bb6a;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#2E7D32#43A047#66BB6A#AED581#8BC34A
#2E7D32
1.0
1.6
2.2
3.1
2.4
#43A047
1.6
1.0
1.4
2.0
1.6
#66BB6A
2.2
1.4
1.0
1.4
1.1
#AED581
3.1
2.0
1.4
1.0
1.3
#8BC34A
2.4
1.6
1.1
1.3
1.0

Under deuteranopia

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

Colors in this palette

#2E7D32
rgb(46, 125, 50)
#43A047
rgb(67, 160, 71)
#66BB6A
rgb(102, 187, 106)
#AED581
rgb(174, 213, 129)
#8BC34A
rgb(139, 195, 74)

Similar palettes

Fern Color Palette
Lightgreen Color Palette
Spring Green Color Palette

FAQ

How do I use the analogous color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #2E7D32, #43A047, #66BB6A, #AED581, #8BC34A.

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.