OKLCH Color Mixer
sRGB interpolation between two hues cuts through a desaturated grey midpoint. OKLCH interpolates through perceived lightness — L stays constant, so the midpoint is vivid, never muddy. Drag the hue sliders. The top gradient is sRGB. The bottom is OKLCH. The difference defines modern color in CSS.
Drag the hue sliders until the endpoints are complementary — purple and green, or blue and orange. The top gradient (sRGB) passes through a grey, washed-out midpoint. The bottom (OKLCH) stays vivid throughout. This is the fundamental problem OKLCH solves.
Why sRGB fails. RGB is an encoding format, not a perceptual space. Interpolating between hsl(260, 70%, 55%) and hsl(160, 70%, 55%) in sRGB means traversing through hues near green that happen to have lower perceived luminosity — so the midpoint looks dim even though the lightness value is identical. The human visual system has non-uniform sensitivity across hues.
What OKLCH does. OKLab (and its cylindrical form OKLCH) was designed so that moving equal distances in the color space produces equal-looking changes. The L axis is perceptual lightness — L=0.65 looks equally bright whether the hue is blue, green, or red. When you interpolate between two OKLCH values at the same L and C, every step looks equally vivid.
The browser support story. oklch() in CSS landed in Chrome 111, Firefox 113, Safari 15.4. The color-mix(in oklch, ...) function works the same way for blending. As of 2025, you can ship OKLCH to production without a fallback for >95% of users. The @supports (color: oklch(0 0 0)) guard handles the rest.
This demo's implementation. Native CSS oklch() in gradients handles the interpolation automatically in supported browsers. The JS fallback manually converts OKLCH → OKLab → linear sRGB → gamma-corrected sRGB to produce the stepped gradient for the comparison row. The conversion matrix comes from the OKLab spec.