OKLCH Color Converter

About this generator

OKLCH is the color space most design teams quietly moved to in the mid-2020s, and if you still think in HEX you have probably had the uncomfortable experience of pasting a tidy color token into a modern design file and watching it look nothing like the mock. OKLCH — Oklab Lightness, Chroma, Hue — is perceptually uniform in a way sRGB simply is not. Two colors that measure the same lightness in OKLCH actually look like the same lightness, which is why Tailwind v4, Radix Themes, and most mature design systems picked it as the native authoring space. This converter takes any color you can type into a CSS file — HEX, RGB, HSL, or OKLCH itself — and shows you all four representations at once, with the target space you asked for pinned to the top of the list and a live swatch underneath. The math under the hood runs the full sRGB → linear sRGB → OKLab → OKLCH pipeline rather than the back-of-the-envelope approximations that still haunt a lot of online calculators. White lands exactly at oklch(1 0 0), black at oklch(0 0 0), and primary red at roughly oklch(0.628 0.258 29.2) — the values match what the browser itself computes, so you can hand the output straight to a styled-components file or a CSS custom property without a second-guess rounding step. The converter also treats "auto" as the default input mode: paste a hex, paste an rgb() call, paste an oklch() call, and it figures out which space you meant. If you want to force the parse — say you have a bare hex-looking string that is actually meant to be interpreted as something unusual — flip the input-space select to a specific format and it will try that path first and tell you why if the parse fails. The reason to care about OKLCH at this specific moment in web design history is that interpolation finally works the way designers assumed it did all along. The old sRGB midpoint between pure blue (#0000FF) and pure yellow (#FFFF00) is a muddy, desaturated grey that no designer ever actually wants; the OKLCH midpoint of the same two colors is a vivid green that reads as the halfway point perceptually, which is exactly what a progress bar, a thermal map, or an interactive gradient should produce. If you work on charts, data visualisation, dark-mode theming, or accessible contrast ramps, moving your source tokens into OKLCH gives you lightness ramps that stay visually even across the hue circle — a dark blue and a dark red at the same L value finally look like the same darkness, instead of the blue vanishing into the background and the red screaming off the page. This tool is deliberately scoped to interconversion rather than palette generation on purpose: it is the first stop when you adopt OKLCH, and once you can look at an existing hex palette and see what it is in OKLCH, you can start making real decisions about chroma caps for a brand, lightness steps for a scale, and hue drift across light and dark themes. Paste, read, copy, build.

Use Cases

• •Convert a legacy hex palette into OKLCH when migrating a design system to Tailwind v4 or Radix Themes.
• •Sanity-check an oklch() value from Figma or Zeplin by seeing its hex equivalent before committing to a CSS file.
• •Compare the four representations of the same color side-by-side when writing design documentation.
• •Pick a lightness and chroma target in OKLCH, then convert it to hex for a brand-asset export that still demands hex.
• •Debug a color drift between a browser render and a design file by checking whether the mismatch is in sRGB rounding.
• •Teach a team new to perceptual color spaces what the same color looks like in HEX versus HSL versus OKLCH.

FAQ