The OKLCh Ecosystem

OKLCh is the color space that quietly turned color tooling honest: perceptual uniformity that holds up across hues, predictable mixing, and gamut behavior that doesn't lie to you. The entries here…

Summary

OKLCh is the color space that quietly turned color tooling honest: perceptual uniformity that holds up across hues, predictable mixing, and gamut behavior that doesn't lie to you. The entries here are the writing and tools that pushed it out of the color-science literature and into front-end practice — start with the Evil Martians piece, then play with the libraries that make it usable.

Entries

  1. OKLCH in CSS: Why We Moved from RGB and HSL: The case for OKLCH in CSS: lightness that holds across hues, and the syntax to replace RGB and HSL. (source)
  2. A Perceptual Color Space for Image Processing: The post introducing OKLab: where CIELAB’s hue and lightness slip, and the transform that fixes them. (source)
  3. OKLCH Color Picker: Pick colors in OKLCH on the same axes as the CSS function, with sRGB and P3 gamut warnings. (source)
  4. Okhsv and Okhsl: Two New Color Spaces for Color Picking: The derivation of Okhsv and Okhsl: HSV- and HSL-shaped pickers built on OKLab. (source)
  5. Color.js: A JS library for the CSS Color specs: convert, interpolate, and gamut-map across OKLab, OKLCH, P3, and more. (source)
  6. Culori: A functional JS color library for converting, interpolating, and measuring difference across many spaces. (source)
  7. @texel/color: A small, fast JS library for OKLab, OKLCH, Okhsl, and gamut mapping, built for generative art. (source)
  8. CSS Color Module Level 4: The CSS Color 4 spec that added oklch(), lab(), and color() for wide-gamut spaces. (source)
  9. CSS Color Module Level 5: The CSS Color 5 spec: color-mix(), relative color syntax, light-dark(), and contrast-color(). (source)
  10. Better than Lab? Gamut Reduction CIE Lab & OKLab: CIE LCH bends blue toward purple as chroma drops, breaking gamut mapping; OKLab keeps the hue line straight. (source)
  11. sRGB Gamut Clipping: How to pull an out-of-gamut color back into sRGB in OKLab without shifting its hue. (source)
  12. Gamut Mapping Playground: Run out-of-gamut colors through a dozen mapping methods and compare them by ΔE and hue shift. (source)
  13. High Definition CSS Color Guide: A guide to CSS color beyond sRGB: oklch(), display-p3, color-mix(), and gamut media queries. (source)
  14. Harmonizer: Generate an OKLCH palette where every hue hits the same APCA or WCAG contrast at each step. (source)
  15. Atmos Palette Generator: An OKLCH palette editor with easing curves for lightness and chroma, sRGB or P3 limits, and CSS or Figma export. (source)
  16. Huetone: An editor for LCH design-system scales that shows contrast between steps as you drag lightness. (source)
  17. Reasonable Colors: An open color system where shades a set number of steps apart are guaranteed to pass WCAG contrast. (source)
  18. Tailwind CSS Colors: Tailwind’s default palette, 11 steps per hue, redefined in OKLCH in v4 to reach past sRGB. (source)
  19. CSS Gradient Generator: A CSS gradient tool that switches interpolation modes and easing, and shows why RGB blends go grey in the middle. (source)