Hex to OKLCH color converter
Convert hex, RGB and HSL colors to OKLCH in bulk, or OKLCH back to hex. Get Tailwind v4 arbitrary classes and warnings for colors outside sRGB. Free and instant.
| Input | OKLCH | Hex | RGB | HSL | Tailwind v4 | |
|---|---|---|---|---|---|---|
| #6D5BFF | ||||||
| rgb(22 179 100) | ||||||
| hsl(24 95% 60%) | ||||||
| oklch(0.55 0.1 195) | outside sRGB | |||||
| #0F172A |
How to use it
- 1Paste colors, one per line, in hex, rgb(), hsl() or oklch().
- 2Read every format side by side.
- 3Click any value to copy it.
How the conversion works
Hex, RGB and HSL all describe sRGB. The converter turns sRGB into linear light, then into OKLab with the matrices from Björn Ottosson's reference, and finally into OKLCH polar form: lightness from 0 to 1, chroma from 0 to about 0.37, and hue in degrees.
Going the other way, some OKLCH colors have no sRGB equivalent. Those rows are flagged, and the hex shown is the nearest displayable color with the same lightness and hue and reduced chroma, which is how browsers gamut map too.
Using OKLCH in Tailwind CSS v4
@theme {
--color-brand: oklch(0.62 0.21 283);
}
/* bg-brand, text-brand, border-brand */
For one-off values, the arbitrary class the tool prints, like bg-[oklch(0.62_0.21_283)], works directly. For a whole scale, use the OKLCH palette generator.
Frequently asked questions
What is OKLCH?
A perceptual color space with lightness, chroma and hue axes. Equal lightness values look equally bright across hues, which makes palettes and contrast predictable. See the OKLCH glossary entry.
Is OKLCH supported in browsers?
Yes, in all current major browsers. Tailwind CSS v4 uses OKLCH for its default palette.
Why does my OKLCH color look different as hex?
It is probably outside the sRGB gamut. Hex can only express sRGB, so the converter reduces chroma to the nearest color it can show.