hex to OKLCh
OKLCh lightness tracks what the eye sees, so two colors with the same L look equally bright. That makes it the right space for building tonal scales.
Paste a hex value. Other formats work too.
oklch(69.691% 0.14333 232.653)Need every format at once? Open in the full picker
Worked examples
Common colors converted from hex to OKLCh, computed with the same engine the picker uses.
| Color | hex | OKLCh | Copy |
|---|---|---|---|
| Pure red | #ff0000 | oklch(62.796% 0.25768 29.234) | |
| Pure green | #00ff00 | oklch(86.644% 0.29483 142.495) | |
| Pure blue | #0000ff | oklch(45.201% 0.31321 264.052) | |
| White | #ffffff | oklch(100% 0 0) | |
| Mid gray | #808080 | oklch(59.987% 0 0) | |
| Black | #000000 | oklch(0% 0 0) | |
| Interface blue | #4287f5 | oklch(63.521% 0.17906 259.418) | |
| Success green | #22c55e | oklch(72.275% 0.19201 149.579) | |
| Danger red | #ef4444 | oklch(63.683% 0.20785 25.331) | |
| Warning amber | #f59e0b | oklch(76.859% 0.16466 70.08) | |
| Editor black | #1e1e1e | oklch(23.503% 0 0) | |
| Warm sand | #e9c46a | oklch(83.419% 0.11701 87.428) |
How the conversion works
OKLCh lightness tracks what the eye sees, so two colors with the same L look equally bright. That makes it the right space for building tonal scales.
Both formats are computed from a single canonical representation (CIE XYZ with a D65 white point, held in floating point) rather than by chaining one format into the next. That matters because chained conversions accumulate rounding error, and because it means a color that cannot be represented in the target format is handled deliberately rather than by accident.
When the source describes a color outside the target's gamut, chroma is reduced in OKLCh while lightness and hue are held, following the CSS Color 4 gamut mapping algorithm. Clipping each channel independently would be simpler but visibly shifts hue on saturated colors.