HEX to OKLCH Converter

OKLCH describes a color by perceived lightness (L), chroma (C, how colorful) and hue angle (H). Unlike HSL, equal steps in L look equally lighter or darker across all hues, which makes it the best space for palettes, hover states and accessible contrast. This converter turns HEX, rgb() or hsl() into oklch() and oklab() for CSS, and converts OKLCH back to HEX — mapping colors that fall outside sRGB back inside with the CSS Color 4 method and telling you whether they fit the sRGB and Display P3 gamuts.

How to use this tool

1. Choose the direction.
2. Enter a HEX, rgb() or hsl() color — or an oklch() value such as oklch(70% 0.2 150).
3. Read L, C and H, the oklab() form, or the HEX with the gamut checks.
4. For many colors, paste a list into the batch box.

Formula

linear sRGB → LMS (3×3) → ∛ → OKLab (3×3) · C = √(a² + b²) · H = atan2(b, a)

The matrices are Ottosson's, as in CSS Color 4. Out-of-gamut colors are mapped by lowering chroma at constant L and H until simple clipping changes the color by less than ΔEOK 0.02, the CSS Color 4 algorithm.

Example

Pure red #FF0000 is oklch(62.8% 0.2577 29.23) and oklab(62.8% 0.2249 0.1258), the values in the CSS Color 4 specification. The other way, oklch(70% 0.4 150) is a green too vivid even for Display P3: gamut mapping gives #00C248, while simply clipping the channels gives the lighter, harsher #00D600. oklch(70% 0.2 150) fits P3 but not sRGB; its clipped value #00BF54 is already within the tolerance.