🎛️ OKLCH Color Picker & Converter
Pick or paste a color and read it in OKLCH, OKLAB, LAB, LCH, HWB, HEX and RGB at once — with a safe HEX fallback and a warning when a color falls outside the sRGB gamut.
#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 oklch color picker & converter works
Colors are decoded from sRGB, linearised, and passed through the exact published matrices: linear-sRGB → LMS → OKLab (Björn Ottosson), with OKLCH as its polar form (C = √(a²+b²), H = atan2(b, a)); and linear-sRGB → CIE XYZ (D65) → CIELAB → LCH. HWB comes from the HSV hue with whiteness and blackness. Going the other way, OKLCH → sRGB inverts every step; when the result lands outside the displayable sRGB gamut, the tool reduces chroma along constant lightness and hue (the CSS Color 4 gamut-mapping approach) and flags it, so you always get a usable HEX fallback.
OKLCH is now the authoring format and HEX the compatibility format — CSS Color 4 shipped oklch() in every evergreen browser (~93–95% coverage) and Tailwind CSS 4 uses OKLCH as its default color space. The everyday pain is round-tripping OKLCH↔HEX with a gamut check; this does exactly that with byte-exact matrix math a chatbot cannot reproduce.
Frequently asked questions
What is OKLCH?
OKLCH is a perceptually uniform color space: L is lightness (0–100%), C is chroma (colorfulness), and H is hue (0–360°). Equal numeric steps look like equal visual steps, which is why it is better than HSL for building consistent palettes — and it is a first-class CSS color function, oklch().
How do I convert HEX to OKLCH?
Paste the HEX code and read the oklch() value. Internally the color is linearised from sRGB and passed through the OKLab matrices, then converted to polar form. For example #1d87f1 becomes oklch(62.3% 0.183 253.6).
Why is my OKLCH color "out of gamut"?
OKLCH can describe colors more saturated than an sRGB screen can show. When that happens the tool keeps your lightness and hue but lowers chroma until the color fits, and flags it — so the HEX fallback is always displayable. Wide-gamut (P3) displays can show more of these colors.
Is OKLCH better than HSL?
For perceptual work, yes. HSL lightness is not perceptually even — a "50% lightness" yellow looks far brighter than a 50% blue. OKLCH fixes this, so lightness ramps and hue rotations behave predictably, which is why design systems and Tailwind 4 adopted it.
What are OKLAB, LAB, LCH and HWB?
OKLAB is the rectangular form of OKLCH (lightness with a/b axes). CIELAB and LCH are the older CIE perceptual space and its polar form. HWB (hue-whiteness-blackness) is an intuitive CSS space. This one tool shows all of them for the same color.
Do OKLCH colors work in all browsers?
The oklch() function works in all current browsers (Chrome/Edge 111+, Safari 15.4+, Firefox 113+, ~93–95% of users). For older browsers, use the HEX or RGB fallback this tool provides alongside every OKLCH value.
Related color tools
From the blog
-
Extracting Colors from an Image: Pickers, Palettes and Naming
Three ways to pull colors out of an image, all on-device: pick a pixel for its exact HEX/RGB/HSL (or use the EyeDropper API), extract a dominant palette with median-cut, and find the nearest CSS color name by CIEDE2000. How each works and why nothing is uploaded.
-
OKLCH: The Modern CSS Color Format (and How to Convert from HEX)
OKLCH is a perceptually uniform color format — oklch(L% C H) — now supported in ~95% of browsers and Tailwind CSS 4's default. Why it beats HEX and HSL for building shade ramps, how to convert HEX to OKLCH, and why you still keep a HEX fallback.