OKLCH Color Converter — OKLCH to HEX, RGB and HSL

Real-world use cases

• Build a perceptually even tint-and-shade ramp

  Take your brand blue, convert it to OKLCH, then hold C and H fixed while stepping L in equal amounts: 30%, 45%, 60%, 75%, 90%. Each step looks like the same brightness jump, so the resulting tints and shades feel evenly spaced. Doing this in HSL drifts the hue and bunches the lights together; OKLCH keeps the family coherent and the steps readable.

• Hand off a Figma OKLCH color to a developer as HEX

  A designer picks colors in OKLCH inside Figma, but a teammate still targets older browsers and needs a plain HEX fallback. Paste the oklch() value here, copy the HEX, and ship both with a fallback rule. The gamut warning tells you up front whether the OKLCH was wider than sRGB, so the HEX you hand over is an honest match rather than a silent surprise.

• Debug a muddy CSS gradient

  Your blue-to-yellow gradient slumps through gray in the middle. Drop both endpoints into the converter, read their OKLCH, and you will see the lightness and chroma sag along the sRGB path. Re-express the stops in OKLCH so the lightness stays even, and the dead middle disappears. The tool gives you the exact oklch() strings to paste back into the gradient.

• Translate a token system between color formats

  A design-token file stores colors as HEX, but the new theming layer wants OKLCH so it can compute hover and active states by nudging L. Run each token through the converter to get its OKLCH triplet, keep the HEX as the legacy value, and your tokens now carry both, ready for math-driven state colors without a separate library.

Common pitfalls

• Reading chroma as a percentage. C is an open-ended number, not a 0–100 scale. A typical vivid sRGB color sits near 0.15–0.25, and the ceiling is roughly 0.37. Typing 50 expecting half-saturation gives you a wildly out-of-gamut value that clamps back to something unexpected.

• Forgetting hue is in degrees, not the 0–1 chroma scale. H runs 0–360 like a color wheel; 145 is green, 264 is blue. Putting a small decimal there, as if it matched chroma, snaps your color to a red near hue 0 and the result looks nothing like what you intended.

• Assuming the HEX you get back always equals your OKLCH exactly. If the converter shows the out-of-gamut warning, the HEX is the clamped nearest sRGB color, not a perfect match. Lower the chroma until the warning clears if you need the HEX and the OKLCH to agree on screen.

Privacy