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.
Paid links below. As an Amazon Associate we earn from qualifying purchases.
Library
Colour references for your next project
Compare the original references behind this archive. Check the contents, edition and format before choosing a book.
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.
Torn between the two Wada dictionaries? Vol 1 vs Vol 2, compared plate by plate →
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.