Forest Canopy color palette
A single green hue runs from the shaded floor of a forest up to sunlit leaves. The two darker shades, #2D6A4F and #40916C, are deep and lean slightly blue, while #B7E4C7 and #D8F3DC are soft enough to fill a whole page. Saturation stays moderate throughout, so the effect is restful. Use it for plant nurseries, sustainability reports, outdoor gear or a spa that wants green without the lime.
Forest Canopy palette in use
Set #D8F3DC as the page background and #2D6A4F for headings and body text. #40916C makes a solid button color, with #B7E4C7 for cards and hover states.
This pair measures 5.40:1, so it works for body text too. The button uses #74C69D with black text.
ButtonGood for
- Plant nursery website
- Sustainability report
- Wellness app
- Garden center signage
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#2D6A4F | #D8F3DC | 5.40:1 | AA |
#2D6A4F | #B7E4C7 | 4.54:1 | AA |
#40916C | #D8F3DC | 3.24:1 | AA large |
#2D6A4F | #74C69D | 3.13:1 | AA large |
Forest Canopy palette as code
CSS variables
:root {
--forest-canopy-1: #2D6A4F;
--forest-canopy-2: #40916C;
--forest-canopy-3: #74C69D;
--forest-canopy-4: #B7E4C7;
--forest-canopy-5: #D8F3DC;
}Tailwind v4
@theme {
--color-forest-canopy-1: #2D6A4F;
--color-forest-canopy-2: #40916C;
--color-forest-canopy-3: #74C69D;
--color-forest-canopy-4: #B7E4C7;
--color-forest-canopy-5: #D8F3DC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'forest-canopy': {
100: '#2D6A4F',
200: '#40916C',
300: '#74C69D',
400: '#B7E4C7',
500: '#D8F3DC',
},SCSS
$forest-canopy-1: #2D6A4F;
$forest-canopy-2: #40916C;
$forest-canopy-3: #74C69D;
$forest-canopy-4: #B7E4C7;
$forest-canopy-5: #D8F3DC;JSON
["#2D6A4F","#40916C","#74C69D","#B7E4C7","#D8F3DC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.