What Is OKLCH? The Color Space Behind These Tools
OKLCH is a modern, perceptually-uniform color space you can write directly in CSS with the oklch() function — supported in every current browser. It's the model this whole site computes in, because it behaves the way designers expect color to.
Lightness that actually means lightness
In RGB and HSL, equal numeric steps don't look equally different. HSL yellow at 50% lightness looks far brighter than HSL blue at 50% — the number says they match, your eyes say otherwise.
OKLCH's L axis is perceptual: a fixed lightness reads as roughly the same brightness across every hue. That single property is what makes even color ramps, readable contrast, and sane dark-mode inversion possible.
Three axes you can reason about
OKLCH has L (lightness, 0–1), C (chroma — how colorful, from 0 for gray up to roughly 0.4 for the most vivid colors a screen can show), and H (hue angle, 0–360°). They're largely independent: you can rotate the hue without the color getting lighter or darker, or dial chroma up and down at a fixed perceived lightness.
That independence is why a one-color theme can derive a coherent palette, and why a gradient can hold its saturation through the middle instead of washing out to gray.
Built for wide-gamut screens
OKLCH can describe colors more vivid than sRGB can show — the kind Display-P3 screens render. When a color falls outside what a display supports, the right move is to reduce its chroma while keeping lightness and hue, not to clip the RGB channels (which shifts the hue and muddies the result). Every HEX, RGB, and HSL conversion here uses exactly that chroma-clamping fallback, while the oklch() and Display-P3 outputs keep the vivid original.
Writing it in CSS
The syntax is oklch(L C H) — for example oklch(0.7 0.15 250) is a medium-bright blue. Add a slash for alpha: oklch(0.7 0.15 250 / 0.5). It works in all modern browsers, and you can mix it into gradients with linear-gradient(in oklch, …) for smooth, luminous blends.