Forest Calm
Success & TrustNatural organic green scale with balanced chroma for sustainability platforms and finance dashboards.
About the Forest Calm palette
Natural organic green scale with balanced chroma for sustainability platforms and finance dashboards. The scale is anchored at hue 140 in OKLCH, so every step keeps the same hue while lightness moves in perceptually even steps from 50 to 950. The 500 step (#428731) is your base color. Shades 600-950 pass WCAG 2.1 AA against white and shades 50, 100, 200, 300, 400, 500 pass against black, so use the light end for backgrounds and the dark end for text on light surfaces (or vice versa). Each value is copy-ready as oklch(), HEX, RGB or HSL.
11 colors · click a card to copy
cart writes to --color-forest-calm-*
Shade Step Breakdown (50 to 950)
| Swatch | Shade Step | OKLCH CSS Value | sRGB Fallback | RGB | HSL | WCAG on Black | WCAG on White | Gamut |
|---|---|---|---|---|---|---|---|---|
| 50 | oklch(97.0% 0.035 140.0) | #e9fbe5 | rgb(233, 251, 229) | hsl(109.08, 75.72%, 94.24%) | 19.4:1 | 1.08:1 | sRGB | |
| 100 | oklch(93.0% 0.070 140.0) | #d0f4c8 | rgb(208, 244, 200) | hsl(109.14, 66.97%, 87.04%) | 17.46:1 | 1.2:1 | sRGB | |
| 200 | oklch(86.0% 0.105 140.0) | #ace2a1 | rgb(172, 226, 161) | hsl(109.2, 53.48%, 75.85%) | 14.15:1 | 1.48:1 | sRGB | |
| 300 | oklch(76.0% 0.140 140.0) | #7fc76f | rgb(127, 199, 111) | hsl(109.15, 43.67%, 60.7%) | 10.3:1 | 2.04:1 | sRGB | |
| 400 | oklch(64.0% 0.140 140.0) | #5aa04a | rgb(90, 160, 74) | hsl(108.98, 36.69%, 45.97%) | 6.56:1 | 3.2:1 | sRGB | |
| 500 | oklch(56.0% 0.140 140.0) | #428731 | rgb(66, 135, 49) | hsl(108.6, 46.52%, 36.25%) | 4.74:1 | 4.43:1 | sRGB | |
| 600 | oklch(45.0% 0.140 140.0) | #1f6708 | rgb(31, 103, 8) | hsl(105.11, 86.25%, 21.58%) | 3:1 | 7:1 | sRGB | |
| 700 | oklch(37.0% 0.117 140.0) | #144d02 | rgb(20, 77, 3) | hsl(105.79, 93.67%, 15.66%) | 2.09:1 | 10.04:1 | sRGB | |
| 800 | oklch(28.0% 0.088 140.0) | #0a3201 | rgb(10, 50, 1) | hsl(108.98, 95.72%, 10.11%) | 1.47:1 | 14.29:1 | sRGB | |
| 900 | oklch(20.0% 0.063 140.0) | #041c00 | rgb(4, 28, 0) | hsl(112.9, 97.26%, 5.63%) | 1.17:1 | 17.93:1 | sRGB | |
| 950 | oklch(13.0% 0.041 140.0) | #010b00 | rgb(1, 11, 0) | hsl(114.85, 97.97%, 2.12%) | 1.05:1 | 20.02:1 | sRGB |
Tailwind v4 @theme Snippet for Forest Calm
Copy into global.css
@theme {
--color-forest-calm-50: oklch(97.0% 0.035 140.0);
--color-forest-calm-100: oklch(93.0% 0.070 140.0);
--color-forest-calm-200: oklch(86.0% 0.105 140.0);
--color-forest-calm-300: oklch(76.0% 0.140 140.0);
--color-forest-calm-400: oklch(64.0% 0.140 140.0);
--color-forest-calm-500: oklch(56.0% 0.140 140.0);
--color-forest-calm-600: oklch(45.0% 0.140 140.0);
--color-forest-calm-700: oklch(37.0% 0.117 140.0);
--color-forest-calm-800: oklch(28.0% 0.088 140.0);
--color-forest-calm-900: oklch(20.0% 0.063 140.0);
--color-forest-calm-950: oklch(13.0% 0.041 140.0);
}Convert Forest Calm shades
Working with these shades in another format? Use the matching converter — the same values you see above, converted instantly with live gamut detection.