Perceptually Uniform
OKLCH is designed for human perception. Changing the lightness channel actually makes colors look proportionally lighter — unlike HSL where hsl(120 100% 50%) and hsl(120 100% 70%) have wildly different perceived brightness.
okcolor
Convert legacy hex, rgb, hsl, and hwb colors to perceptually uniform OKLCH at build time. Zero runtime overhead.
Why OKLCH?
Wide Gamut Ready
OKLCH can represent every color visible to the human eye. As displays move beyond sRGB (Display P3, Rec. 2020), OKLCH future-proofs your design system.
Mathematically Correct
Our conversion engine uses the exact W3C CSS Color Module Level 4 matrices, verified against Culori to sub-ulp precision. Every coefficient is documented and provable.
Zero Runtime Cost
Everything happens at build time. The pure-JS engine scans and transforms your CSS in a single pass — ~10 MB/s throughput, sub-millisecond for typical files.
What gets converted
| Input | Example | Output |
|---|---|---|
| Hex | #ff0000 | oklch(62.8% 0.25768 29.23) |
| RGB | rgb(255, 0, 0) | oklch(62.8% 0.25768 29.23) |
| HSL | hsl(0, 100%, 50%) | oklch(62.8% 0.25768 29.23) |
| HWB | hwb(0 0% 0%) | oklch(62.8% 0.25768 29.23) |
| Named | red | oklch(62.8% 0.25768 29.23) |
| Gradients | linear-gradient(#f00, #00f) | linear-gradient(in oklch, oklch(...), oklch(...)) |
Modern colors like oklch(), oklab(), lab(), lch(), and color(display-p3 ...) pass through untouched.