HEX to HSL Converter
Turn HEX codes into HSL, the format that makes lighter and darker variants easy.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to convert HEX to HSL
- Paste a colour in any format — or pick it on the colour square or from your screen.
- Read the result and every other format; fine-tune with the channel sliders.
- Copy the value or code, or convert a whole list.
About HEX to HSL Converter
Convert HEX colours to HSL (hue, saturation, lightness).
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Web and app design
- Matching brand colours across tools
- Front-end development and design tokens
Tip: Press the arrow keys on the colour square or sliders for fine steps; hold Shift for bigger ones.
Frequently asked questions
What does HSL mean?
Hue (the colour angle on a wheel, 0–360°), Saturation (0 % grey to 100 % full colour) and Lightness (0 % black, 50 % pure colour, 100 % white). It is easier to adjust by hand than RGB.
Which colour formats can I paste?
Any CSS format: HEX (#rgb, #rrggbb, with alpha), rgb() / rgba(), hsl() / hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), HSV/HSB, CMYK, the 148 CSS colour names and plain numbers like “79, 110, 247”.
Can I pick a colour from my screen?
Yes — in Chrome and Edge, click the eyedropper next to the colour square and click anywhere on your screen, even outside the browser.
Can I convert many colours at once?
Yes — open “Convert a list of colours”, paste one colour per line in any format and copy or download the results as CSV.
What are OKLCH and OKLab?
Modern perceptual colour spaces: equal steps look equally different to the eye, which makes them ideal for palettes and design tokens. All current browsers support oklch() in CSS.