hex to HSL
HSL is a straightforward reshaping of encoded RGB, which is why its lightness does not match perceived brightness. OKLCh is the better choice when you need that.
Paste a hex value. Other formats work too.
hsl(195.6 100% 45.3%)Need every format at once? Open in the full picker
Worked examples
Common colors converted from hex to HSL, computed with the same engine the picker uses.
| Color | hex | HSL | Copy |
|---|---|---|---|
| Pure red | #ff0000 | hsl(0 100% 50%) | |
| Pure green | #00ff00 | hsl(120 100% 50%) | |
| Pure blue | #0000ff | hsl(240 100% 50%) | |
| White | #ffffff | hsl(300 100% 100%) | |
| Mid gray | #808080 | hsl(300 0% 50.2%) | |
| Black | #000000 | hsl(0 0% 0%) | |
| Interface blue | #4287f5 | hsl(216.9 89.9% 61%) | |
| Success green | #22c55e | hsl(142.1 70.6% 45.3%) | |
| Danger red | #ef4444 | hsl(0 84.2% 60.2%) | |
| Warning amber | #f59e0b | hsl(37.7 92.1% 50.2%) | |
| Editor black | #1e1e1e | hsl(0 0% 11.8%) | |
| Warm sand | #e9c46a | hsl(42.5 74.3% 66.5%) |
How the conversion works
HSL is a straightforward reshaping of encoded RGB, which is why its lightness does not match perceived brightness. OKLCh is the better choice when you need that.
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.