HEX to HSL Converter
Convert a hex code into hue, saturation and lightness. HSL is the format worth learning because it maps onto how people actually think about colour: hue is which colour it is, saturation is how vivid, lightness is how bright. That makes generating a lighter or darker version trivial — change one number — which is exactly what the shade row below gives you.
HSL
hsl(262, 83%, 58%)
L 20%
#28095D
L 40%
#5011BB
L 60%
#8344EE
L 80%
#C1A2F6
- Hue
- 262°
- Saturation
- 83%
- Lightness
- 58%
- HEX
- #7C3AED
- RGB
- rgb(124, 58, 237)
- HSL
- hsl(262, 83%, 58%)
Nothing is uploaded — this tool runs inside your browser, so your files never leave your device.
Why use this tool
- Hue, saturation and lightness broken out separately with explanations
- Ready-made lighter and darker shades at 20%, 40%, 60% and 80% lightness
- Also gives HEX, RGB and HSL strings to copy
- Live swatch for every value
How it works
- 1Paste your hex code.
- 2Read the HSL value and what each component means.
- 3Use the shade swatches to build a scale from one colour.
HEX to HSL Converter — frequently asked questions
Hue is a position on the colour wheel from 0 to 360 degrees — 0 is red, 120 green, 240 blue. Saturation runs 0% (grey) to 100% (fully vivid). Lightness runs 0% (black) through 50% (the pure hue) to 100% (white).
More colour tools
Looking for something else? Browse all colour tools
Explore the other tools
Same deal everywhere on the site — free, no sign-up, and no watermark on anything you download.
Or see every tool on one page.