Color Converter
Enter a color in any common CSS format and get the equivalent HEX, RGB, HSL and OKLCH values, plus a live swatch.
About this tool
Enter a color in any common CSS form — #rgb / #rrggbb / #rrggbbaa hex, rgb() / rgba(), hsl() / hsla(), oklch(), or one of the 148 CSS named colors plus transparent — and get every other representation back with a live swatch. The sRGB, HSL and hex conversions are exact; OKLCH is computed from Björn Ottosson's OKLab matrices in the page. Comma and space function syntax both work, values may be numbers or percentages, and input is case-insensitive.
When to use it
Questions
Why use OKLCH instead of HSL?
OKLCH is perceptually uniform: equal numeric steps in lightness or chroma look like equal visual steps, and changing the hue does not shift the apparent brightness. That makes it far more predictable than HSL for generating color scales, adjusting contrast, or interpolating between colors programmatically.
What happens to an OKLCH color that is not displayable in sRGB?
OKLCH can describe colors outside the sRGB gamut. When you enter one, each channel is clamped into range before conversion, so the RGB and hex values are the nearest in-gamut approximation rather than an exact match. The tool shows a notice when this happens.
Are the conversions lossy?
Hex, RGB and HSL are exact round-trips. OKLCH involves a cube root and matrix multiplication, so converting to OKLCH and back can shift a channel by a unit or two of rounding — expected and visually imperceptible.
Which alpha formats are supported?
Alpha is read from #rrggbbaa hex, from the fourth argument of rgba() / hsla(), and from the / value in space-separated rgb() and oklch(). The swatch shows it over a checkerboard, and an alpha below 1 adds a HEX + alpha row to the output.