HSL to OKLCH Converter

Move from HSL to a perceptual model where lightness actually means lightness.

Precision

OKLCH

oklch(0.626 0.186 259.6)

OKLABoklab(62.6% -0.034 -0.183)

HEX#3c83f6

RGBrgb(23.6% 51.507% 96.4%)

HSLhsl(217 91% 60%)

LABlab(55 8.1 -65)

LCHlch(55 65.5 277)

Display P3color(display-p3 0.309 0.509 0.933)

sRGBIn gamutP3In gamutRec.2020In gamut

Why leave HSL?

In HSL, yellow at 50% lightness looks far brighter than blue at 50%. OKLCH fixes this: its lightness is perceptual, so equal numbers look equally light across hues.

Related tools

OKLCH to HSL HEX to OKLCH OKLCH vs HSL