HEX to OKLCH Converter

Active color#000000

Hex Input

OKLCH Output

1Active Line0Valid Items

Convert HEX color codes into OKLCH, the cylindrical form of OKLab and a CSS Color 4 function you can use directly in a stylesheet.

Input formats

Provide colors as 3, 4, 6, or 8-digit hex codes, with or without a leading #. Each line is parsed independently in batch mode.

OKLCH output

#FF5733 becomes oklch(68.04% 0.21 33.69). Lightness prints as a percentage, chroma as a plain number, and hue as a degree value from 0 to 360.

OKLCH as a CSS color function

Unlike LCH or LAB, oklch() ships as a native CSS color function in current browsers, which means it can go directly into a color or background-color declaration. Its lightness and chroma axes also track perceived brightness and vividness more evenly than HSL, making it easier to build a shade or tint scale by changing only the L value.

Frequently Asked Questions

What HEX format does it accept?

3, 4, 6, or 8-digit hex codes with or without the leading #, such as #FF5733 or FF5733. Paste one color per line for batch conversion.

What does each OKLCH number mean?

L is lightness from 0% to 100%, C is chroma, or distance from gray, typically up to about 0.4 for sRGB colors, and H is a hue angle from 0 to 360 degrees.

Is oklch() valid CSS?

Yes. oklch() is a CSS Color 4 color function supported directly in modern browsers, so the output from this converter can be pasted straight into a stylesheet without a fallback or polyfill in current browser versions.