HEX to OKLCH Converter
Use this HEX to OKLCH converter to turn a hex code like #3b82f6 into a modern oklch() color for CSS. OKLCH is perceptually uniform, so adjusting lightness or chroma behaves predictably. It runs in your browser — nothing is uploaded.
Pick or paste a color
Edit any field — HEX, RGB, HSL, HSV, CMYK or OKLCH — and the rest update instantly. Copy the CSS string you need.
How to convert HEX to OKLCH
Paste your hex code
Type a hex value such as #3b82f6 into the HEX field, with or without the leading hash.
Read the OKLCH value
The oklch() value updates instantly as L (lightness %), C (chroma) and H (hue), alongside RGB, HSL, HSV and CMYK.
Copy the oklch() string
Copy a CSS-ready value like oklch(62.7% 0.176 41.3) and paste it straight into your stylesheet.
What is OKLCH and why use it?
OKLCH is a modern CSS color space (Lightness, Chroma, Hue) built on OKLab. Its big advantage is being perceptually uniform: two colors with the same L look equally bright to the eye, so you can build accessible palettes, hover states and gradients that stay even — something HEX and HSL do not guarantee.
It is widely supported in modern browsers (since 2023) and is the recommended way to author colors in current CSS. If you must support very old browsers, keep a HEX or rgb() fallback — this converter gives you both at once.
How accurate is the conversion?
The conversion uses the standard sRGB → OKLab matrices, computed entirely in your browser. It is meant for sRGB colors and CSS authoring — great for design and the web, not a substitute for a calibrated print proof. Nothing you enter is uploaded or stored.
Frequently asked questions
What is the oklch() CSS function?
It defines a color by Lightness (0–100%), Chroma (roughly 0–0.4) and Hue (0–360°) in the OKLCH space, e.g. oklch(62.7% 0.176 41.3). It is perceptually uniform, unlike HSL.
Why convert HEX to OKLCH?
To author colors in modern, accessible CSS. Equal lightness values look equally bright, so palettes, dark-mode variants and gradients stay even — hard to achieve reliably with HEX.
Is OKLCH supported in browsers?
Yes — all modern browsers have supported oklch() since 2023. For very old browsers, keep a HEX/rgb() fallback, which this tool also shows.
Is my color data uploaded?
No. Every conversion is computed locally in your browser with standard color math. Nothing is uploaded, and there is no sign-up.