Tools / Color Converter / HEX → OKLCH
HEX to OKLCH Converter.
HEX to OKLCH converts a familiar web hex into OKLCH — the perceptual color space CSS Color 4 added. Unlike HSL, equal lightness numbers in OKLCH actually look equally light, which is why design systems are migrating to it for predictable tints, shades, and accessible contrast.
Not a recognizable HEX color.
All formats
The HEX → OKLCH formula
Hex → linear sRGB → OKLab (a fixed 3×3 matrix + cube roots, per Björn Ottosson) → polar form: L = perceptual lightness, C = √(a²+b²) = chroma, H = atan2(b,a) = hue.
Worked example
Convert #1B2A4E:
- Hex → rgb(27, 42, 78) → linear sRGB
- Linear → OKLab (L, a, b)
- L ≈ 0.28, chroma ≈ 0.07, hue ≈ 268°
- Result: oklch(28% 0.07 268)
CSS
/* CSS Color 4 — supported in all modern browsers */
--navy: #1B2A4E;
--navy-oklch: oklch(28% 0.07 268);
/* Perceptually-even shades — just change L: */
--navy-600: oklch(34% 0.07 268);
--navy-400: oklch(46% 0.07 268);FAQ
Why move from HSL to OKLCH?
In HSL, hsl(60,100%,50%) (yellow) looks far brighter than hsl(240,100%,50%) (blue) at the same lightness. OKLCH fixes that — its L is perceptually uniform, so tints and contrast behave predictably across hues.
Is OKLCH safe to ship?
Yes — oklch() is supported in all current browsers. Provide a hex fallback for very old ones, which Astro/PostCSS can automate.