Skip to content
nsscode

← labtool2026-09-05

OKLCH ramp

Pick a hue and a chroma, get a perceptually even ramp and the CSS to paste. The tokens of this site were built with it.

  1. 100 · L 0.97
  2. 200 · L 0.871
  3. 300 · L 0.773
  4. 400 · L 0.674
  5. 500 · L 0.575
  6. 600 · L 0.476
  7. 700 · L 0.377
  8. 800 · L 0.279
  9. 900 · L 0.18
CSS 
--accent-100: oklch(0.97 0.056 28);
--accent-200: oklch(0.871 0.102 28);
--accent-300: oklch(0.773 0.134 28);
--accent-400: oklch(0.674 0.154 28);
--accent-500: oklch(0.575 0.16 28);
--accent-600: oklch(0.476 0.154 28);
--accent-700: oklch(0.377 0.134 28);
--accent-800: oklch(0.279 0.102 28);
--accent-900: oklch(0.18 0.056 28);

Lightness is spaced evenly; chroma is tapered towards both ends so the extremes stay inside the display gamut. Browsers clip anything that does not, which is why a flat chroma looks wrong at the ends.