🎯 HEX to OKLCH Converter
Turn a HEX code into an oklch() value — the perceptually uniform CSS Color 4 format — with OKLAB and LAB shown too.
#1d87f1
oklch(62.3% 0.1828 253.6)oklab(62.3% -0.0517 -0.1753)lab(56.02 10.09 -61.05)lch(56.02 61.88 279.4)hwb(210 11% 5%)#1d87f1rgb(29, 135, 241)hsl(210, 88%, 53%)Exact OKLab matrices (Björn Ottosson) + CIE XYZ/LAB (D65). Out-of-gamut OKLCH colors are chroma-mapped along constant L and H. 🔒 Computed in your browser.
How the hex to oklch converter works
The HEX code is decoded to sRGB, linearised, and passed through the exact OKLab matrices (linear-sRGB → LMS → OKLab), then written in polar OKLCH form. The tool also shows OKLAB, LAB, LCH, HWB and the original RGB, so you can copy whichever your CSS needs.
Converting HEX to OKLCH is the first step teams take when migrating a color system to CSS Color 4 or Tailwind 4 — OKLCH lets you build even lightness ramps that HEX and HSL cannot.
Frequently asked questions
How do I convert HEX to OKLCH?
Paste the HEX code; the tool linearises the sRGB channels and applies the OKLab transform, giving an oklch(L% C H) value. #1d87f1 becomes oklch(62.3% 0.183 253.6).
Is the conversion exact?
Yes — it uses Björn Ottosson's published OKLab matrices, the same math browsers use for the oklch() function, so the output matches what the browser renders.
Why convert HEX to OKLCH at all?
OKLCH is perceptually uniform, so adjusting lightness or hue behaves predictably. Teams convert their HEX palettes to OKLCH to build consistent shade scales and to author in the modern CSS format.
What if the HEX color has no exact OKLCH?
Every sRGB (HEX) color has an exact OKLCH value — the conversion is lossless in that direction. Gamut issues only arise going the other way, when an OKLCH color is too saturated for sRGB.
Does it also give OKLAB and LAB?
Yes — the same page shows OKLAB (rectangular OKLab), CIELAB, LCH and HWB for the color, so you do not need a separate converter.