Frozen Forest as a scale
Eleven steps from #cfe8b6, built by moving lightness in OKLCh and keeping the hue where it is. Every step is gamut-mapped by giving up chroma, never by clipping channels — clipping is what turns a light blue purple.
| Stop | Hex | OKLCh L | Chroma | On white | On black | APCA on white | ΔE00 from the step above |
|---|---|---|---|---|---|---|---|
| 50 | #e7ffcf | 97.0% | 0.068 ·capped | 1.07:1 | 19.59:1 | 0 | — |
| 100 | #dbf5c2 | 93.8% | 0.071 | 1.18:1 | 17.83:1 | 9 | 2.3 |
| 200 | #c7dfae | 87.4% | 0.071 | 1.44:1 | 14.63:1 | 21 | 4.7 |
| 300 | #b2cb9a | 81.0% | 0.071 | 1.77:1 | 11.87:1 | 32 | 5.0 |
| 400 | #9eb686 | 74.6% | 0.071 | 2.21:1 | 9.51:1 | 43 | 5.4 |
| 500 | #8ba273 | 68.2% | 0.071 | 2.80:1 | 7.51:1 | 54 | 5.9 |
| 600 | #788e60 | 61.8% | 0.071 | 3.59:1 | 5.86:1 | 63 | 6.5 |
| 700 | #657b4e | 55.4% | 0.071 | 4.66:1 | 4.51:1 | 72 | 7.3 |
| 800 | #53693c | 49.0% | 0.071 | 6.11:1 | 3.44:1 | 80 | 7.1 |
| 900 | #2c3f13 | 34.0% | 0.071 | 11.51:1 | 1.82:1 | 96 | 14.0 |
| 950 | #0b1500 | 18.0% | 0.048 ·capped | 18.69:1 | 1.12:1 | 105 | 15.5 |
What is true of this ramp
- 10 of the 10 adjacent pairs differ by ΔE00 2 or more. Every step here is a step a reader can see.
- The tightest pair is 50 to100, at ΔE00 2.3.
- 2 steps had to give up chroma to stay inside sRGB — 50, 950. A wider display would show them more vividly.
- 4 steps clear 4.5:1 on white (700, 800, 900, 950), and 8 on black (50, 100, 200, 300, 400, 500, 600, 700).
Harmonies from Frozen Forest
complement
the hue directly opposite, at the same lightness. #ebd3ff (+180°) — chroma capped by sRGB.
analogous
the two neighbours 30° either side. #e9e0a9 (+-30°), #b6edcd (+30°)
split complement
the two hues either side of the opposite, 30° apart from it. #d7dbff (+150°), #ffcced (+210°) — chroma capped by sRGB.
triad
the circle divided in three. #c5e1ff (+120°), #ffd0d6 (+240°) — chroma capped by sRGB.
tetrad
the circle divided in four. #a8eaff (+90°), #ebd3ff (+180°), #ffd3c4 (+270°) — chroma capped by sRGB.
The ramp as CSS
:root {
--frozen-forest-50: #e7ffcf;
--frozen-forest-100: #dbf5c2;
--frozen-forest-200: #c7dfae;
--frozen-forest-300: #b2cb9a;
--frozen-forest-400: #9eb686;
--frozen-forest-500: #8ba273;
--frozen-forest-600: #788e60;
--frozen-forest-700: #657b4e;
--frozen-forest-800: #53693c;
--frozen-forest-900: #2c3f13;
--frozen-forest-950: #0b1500;
}