Forest Palette
CSS variables
:root {
--color-1: #1B4332;
--color-2: #2D6A4F;
--color-3: #40916C;
--color-4: #74C69D;
--color-5: #B7E4C7;
}Tailwind config
// tailwind.config.js
colors: {
"forest-1": "#1B4332",
"forest-2": "#2D6A4F",
"forest-3": "#40916C",
"forest-4": "#74C69D",
"forest-5": "#B7E4C7",
}About this palette
The Forest palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
Aa
#1B4332White11.08:1AAAa
#2D6A4FWhite6.39:1AAAa
#40916CNear-black4.93:1AAAa
#74C69DNear-black9.27:1AAAa
#B7E4C7Near-black13.44:1AAThese colours on each other
6 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #1B4332 | #2D6A4F | #40916C | #74C69D | #B7E4C7 |
|---|---|---|---|---|---|
| #1B4332 | 1.73Fails | 2.89Fails | 5.44AA | 7.88AA | |
| #2D6A4F | 1.73Fails | 1.67Fails | 3.14Large only | 4.55AA | |
| #40916C | 2.89Fails | 1.67Fails | 1.88Fails | 2.72Fails | |
| #74C69D | 5.44AA | 3.14Large only | 1.88Fails | 1.45Fails | |
| #B7E4C7 | 7.88AA | 4.55AA | 2.72Fails | 1.45Fails |
More palettes