This tool runs entirely in your browser. Nothing you paste is uploaded.
How you can check →HEX to OKLCH converter
Converts HEX to OKLCH, entirely in your browser, with the same round-trip receipt the full color converter shows.
OKLCH is the color space CSS gained across 2023 specifically to fix what HSL and HSB never could: a lightness channel that actually tracks how light a color looks, plus a chroma axis that can be reduced without shifting hue. Converting from HEX gets you there in steps most tools skip over silently — first the 0-255 sRGB triple is linearized, undoing the gamma curve baked into every hex byte, then that linear-light triple is transformed through CIE XYZ into Oklab, and finally Oklab's a/b axes become OKLCH's chroma and hue. Skip the linearization step, which a surprising number of hand-rolled converters do, and the resulting L, C and h values look plausible but describe a different color than the hex you started with.
Every hex value is inside sRGB by definition, so this direction is never lossy at the color level — the only precision that can be lost is in how many decimal places the printed oklch() string keeps. Tailwind CSS v4 made this conversion a daily one for a lot of developers: the framework's default palette moved to OKLCH, so a brand hex color handed down from a designer now has to become an oklch() triple before it fits into a @theme block or a CSS custom property the rest of the design system expects.
A worked example, measured directly rather than hand-computed: #3b82f6 (Tailwind's blue-500) converts to oklch(0.623 0.188 259.823) at full precision. Round that to one decimal place each — oklch(0.6 0.2 259.8) — and re-parsing it back to sRGB no longer lands on exactly #3b82f6; it's off by a channel or two at the 8-bit level. That's not a bug in either direction, it's what rounding a continuous value always does — the receipt below this page's converter shows the real answer for whatever hex you paste in, rather than asserting one fixed precision is always enough.
Chroma is the one number in the output that doesn't have an intuitive HEX analog. It isn't a percentage of anything — it's an absolute distance from grey in Oklab's a/b plane, roughly 0 to 0.4 for colors that fit inside sRGB, which is why this page prints it to three decimal places rather than rounding it to something that looks tidier but throws away the value's actual precision. Out-of-gamut input can't come up in this direction at all: since every hex value is sRGB by construction, there's never a color to gamut-map here. That problem belongs entirely to the reverse conversion, OKLCH to HEX.
Use this conversion when a design tool, brand guideline or existing CSS file hands you a hex color and the destination is a modern OKLCH-based design system, a Tailwind v4 @theme block, or any CSS that needs to interpolate or lighten/darken the color predictably — OKLCH lightness steps look even to the eye in a way HSL lightness steps do not.
Frequently asked questions
- Why doesn't the rounded OKLCH value convert back to my exact hex?
- OKLCH printed to a couple of decimal places is a rounded approximation, the same way whole-number HSL is. This page's converter searches for the precision that round-trips exactly and shows the real receipt for your specific input, rather than assuming a fixed digit count is always enough.
- What does the chroma number mean?
- Chroma is OKLCH's colorfulness axis — an absolute distance from grey in the Oklab color space, not a percentage. Values roughly 0 to 0.4 cover what fits inside sRGB; higher values exist in wider gamuts like Display P3.
- Can every hex color be expressed exactly in OKLCH?
- Yes — OKLCH is an unbounded color space (unlike hex, rgb(), hsl() and hwb(), which are all sRGB-bound), so it can represent any color exactly, including colors outside sRGB. Since every hex value already sits inside sRGB, converting from hex is always exact at the color level.