Matt Green as a scale
Eleven steps from #39ad48, 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 | #e0ffe1 | 97.0% | 0.051 ·capped | 1.07:1 | 19.57:1 | 0 | — |
| 100 | #bbffbd | 93.8% | 0.112 ·capped | 1.16:1 | 18.14:1 | 7 | 9.8 |
| 200 | #83f38b | 87.4% | 0.175 | 1.38:1 | 15.20:1 | 18 | 8.2 |
| 300 | #6ede77 | 81.0% | 0.175 | 1.70:1 | 12.36:1 | 30 | 5.0 |
| 400 | #58c963 | 74.6% | 0.175 | 2.12:1 | 9.92:1 | 41 | 5.4 |
| 500 | #41b44f | 68.2% | 0.175 | 2.67:1 | 7.85:1 | 52 | 5.8 |
| 600 | #279f3a | 61.8% | 0.175 | 3.42:1 | 6.14:1 | 61 | 6.4 |
| 700 | #008b26 | 55.4% | 0.172 ·capped | 4.44:1 | 4.73:1 | 70 | 7.2 |
| 800 | #00751f | 49.0% | 0.153 ·capped | 5.87:1 | 3.58:1 | 79 | 7.7 |
| 900 | #00450e | 34.0% | 0.106 ·capped | 11.28:1 | 1.86:1 | 95 | 15.5 |
| 950 | #001802 | 18.0% | 0.056 ·capped | 18.62:1 | 1.13:1 | 105 | 17.7 |
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 200 to300, at ΔE00 5.0.
- 6 steps had to give up chroma to stay inside sRGB — 50, 100, 700, 800, 900, 950. A wider display would show them more vividly.
- 3 steps clear 4.5:1 on white (800, 900, 950), and 8 on black (50, 100, 200, 300, 400, 500, 600, 700).
Harmonies from Matt Green
complement
the hue directly opposite, at the same lightness. #c667cc (+180°)
analogous
the two neighbours 30° either side. #909c00 (+-30°), #00ab8f (+30°) — chroma capped by sRGB.
split complement
the two hues either side of the opposite, 30° apart from it. #9c78f0 (+150°), #e15c97 (+210°)
triad
the circle divided in three. #5e8bfc (+120°), #ea5e58 (+240°)
tetrad
the circle divided in four. #009edc (+90°), #c667cc (+180°), #db7200 (+270°) — chroma capped by sRGB.
The ramp as CSS
:root {
--matt-green-50: #e0ffe1;
--matt-green-100: #bbffbd;
--matt-green-200: #83f38b;
--matt-green-300: #6ede77;
--matt-green-400: #58c963;
--matt-green-500: #41b44f;
--matt-green-600: #279f3a;
--matt-green-700: #008b26;
--matt-green-800: #00751f;
--matt-green-900: #00450e;
--matt-green-950: #001802;
}