HEX to OKLCH Converter

Active color#000000

Hex Input

OKLCH Output

1Active Line0Valid Items

Shareable link

Settings are written to the URL as you change them. Nothing differs from the defaults yet.

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.