Nature Color Palette

Canopy green, leaf light, sunlit lime and bark brown — the forest floor to the canopy. Anchors: #166534, #4D7C0F, #A3E635, #78350F.

natureorganicoutdoors
#166534
#4D7C0F
#A3E635
#78350F
#98B89E
#166534 #4d7c0f #a3e635 #78350f #98b89e
#166534 #4D7C0F #A3E635 #78350F #98B89E

Semantic roles

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

background#A3E635
surface#98B89E
text#78350F
text-muted#166534
primary#4D7C0F
secondary#166534
accent#98B89E

CSS variables 

:root {
  --background: #a3e635;
  --surface: #98b89e;
  --text: #78350f;
  --text-muted: #166534;
  --primary: #4d7c0f;
  --secondary: #166534;
  --accent: #98b89e;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#166534#4D7C0F#A3E635#78350F#98B89E
#166534
1.0
1.4
4.7
1.3
3.3
#4D7C0F
1.4
1.0
3.3
1.8
2.3
#A3E635
4.7
3.3
1.0
6.0
1.4
#78350F
1.3
1.8
6.0
1.0
4.2
#98B89E
3.3
2.3
1.4
4.2
1.0

Under deuteranopia

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

Colors in this palette

#166534
rgb(22, 101, 52)
#4D7C0F
rgb(77, 124, 15)
#A3E635
rgb(163, 230, 53)
#78350F
rgb(120, 53, 15)
#98B89E
rgb(152, 184, 158)

Similar palettes

Fitness Color Palette
Garden Color Palette
Halloween Color Palette

FAQ

How do I use the nature color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #166534, #4D7C0F, #A3E635, #78350F, #98B89E.

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.