HEX to HSL converter
HSL re-describes a hex color as hue (wheel angle), saturation, and lightness: the way people actually think about adjusting color.
How this works
- 1 Paste or type your HEX value; the tool reads it as you type.
- 2 The HSL value updates live, along with every other format.
- 3 Click any code to copy it, or use bulk mode for a whole list.
- HEX
- #e08b3d
- RGB
- rgb(224, 139, 61)
- RGBA
- rgba(224, 139, 61, 1)
- HSL
- hsl(29, 72%, 56%)
- HSV
- hsv(29, 73%, 88%)
- CMYK
- cmyk(0%, 38%, 73%, 12%)
- LAB
- lab(66.0 28.7 54.1)
- OKLCH
- oklch(71.2% 0.138 59.8)
Guide
When you need HSL instead of HEX
Edit in HSL when you want a darker version that stays the same color: keep H and S, move L. Hover states, shade scales, and theming all get easier.
FAQ
FAQs
Why do two similar hexes have very different hues?
Near grays have almost no saturation, so their hue is nearly meaningless: a tiny channel change swings the angle wildly. Check S before trusting H.
Is HSL perceptually uniform?
No. Equal L steps look bigger in some hues than others. For perceptually even scales, use OKLCH (also in the converter output).
Related: HEX to RGB · RGB to HEX · HSL to HEX · RGB to HSL · every format at once