Forest Color Palette
A five-step canopy of greens from deep pine to pale leaf. Natural, calm and organic.
forestgreennatural
#1E3F20
#2F5D34
#4E7A4E
#7FA97F
#C8D9B8
#1e3f20 #2f5d34 #4e7a4e #7fa97f #c8d9b8
#1E3F20 #2F5D34 #4E7A4E #7FA97F #C8D9B8
Semantic roles
Assigned deterministically: lightest = background, darkest = text, most saturated = primary.
| background | #C8D9B8 | |
| surface | #7FA97F | |
| text | #1E3F20 | |
| text-muted | #2F5D34 | |
| primary | #2F5D34 | |
| secondary | #4E7A4E | |
| accent | #7FA97F |
CSS variables
:root {
--background: #c8d9b8;
--surface: #7fa97f;
--text: #1e3f20;
--text-muted: #2f5d34;
--primary: #2f5d34;
--secondary: #4e7a4e;
--accent: #7fa97f;
}Accessibility matrix
Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).
| Text \ BG | #1E3F20 | #2F5D34 | #4E7A4E | #7FA97F | #C8D9B8 |
|---|---|---|---|---|---|
| #1E3F20 | 1.0 | 1.5 | 2.4 | 4.4 | 7.9 |
| #2F5D34 | 1.5 | 1.0 | 1.5 | 2.9 | 5.1 |
| #4E7A4E | 2.4 | 1.5 | 1.0 | 1.9 | 3.3 |
| #7FA97F | 4.4 | 2.9 | 1.9 | 1.0 | 1.8 |
| #C8D9B8 | 7.9 | 5.1 | 3.3 | 1.8 | 1.0 |
Under deuteranopia
Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.
Colors in this palette
#1E3F20
rgb(30, 63, 32)
#2F5D34
rgb(47, 93, 52)
#4E7A4E
rgb(78, 122, 78)
#7FA97F
rgb(127, 169, 127)
#C8D9B8
rgb(200, 217, 184)
Similar palettes
FAQ
How do I use the forest color palette in CSS?
Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #1E3F20, #2F5D34, #4E7A4E, #7FA97F, #C8D9B8.
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.