Color Converter: HEX, RGB, HSL and OKLCH

How to use

1. Type or paste one color per line, as HEX, rgb(), hsl(), oklch() or a color name.
2. Choose the format to copy, and whether to write CSS custom properties.
3. Read the table of every format for each color, and the warning for any color outside sRGB.
4. Copy the converted values into your stylesheet.

What it checks and how it works

The tool parses each color with culori and writes HEX, RGB, HSL and OKLCH in the space-separated syntax of CSS Color Module Level 4, with a slash and the alpha value when a color is translucent. OKLCH is the polar form of Oklab, the perceptual color space described by Björn Ottosson, who designed it to predict perceived lightness, chroma and hue better than older spaces such as HSL.

A color written in OKLCH can fall outside the sRGB gamut that HEX, RGB and HSL describe. Such a color is brought inside by lowering its chroma while keeping its lightness and hue, using culori's clampChroma, and the table marks it as mapped. That is culori's method and not the exact algorithm in CSS Color 4. Values are rounded, so converting back and forth can change the last digit.