Tool · 2026-05-06
OKLCH, sliced.
OKLCH puts colors on three axes: lightness, chroma, hue. It is built so equal numerical distance feels like equal perceived distance. The plot below is one slice through that space at a fixed lightness. Each angle is a hue. Each radius is how saturated that hue gets. Pixels left blank fall outside what an sRGB display can show.
Selected
- L
- 0.700
- C
- 0.150
- H
- 60.0
- CSS
- oklch(70% 0.150 60)
- Hex
- #c08a3a
- Status
- in sRGB
Note
Two things are worth watching as you move the slider. The reachable region is not a circle. Yellows reach much higher chroma than blues at most lightnesses, because sRGB packs more energy into its yellow-adjacent corner than into its blue one. As lightness moves toward 0 or 1, the region shrinks toward a point: near full black or full white, the only color left is gray.
This matters when you build a palette from OKLCH. Pinning chroma across hues at a fixed lightness, the trick that makes OKLCH attractive in the first place, only works inside the largest circle that fits in the slice. Push past that and your blues clip while your yellows keep going.
Source
Björn Ottosson, "A perceptual color space for image processing", published 2020-12-23 at bottosson.github.io/posts/oklab. The OKLCH form is the polar version of OKLab and is part of the W3C CSS Color Module 4 specification.