How to convert HEX to HSL
- Paste your hex code into the box — with or without the
#, full (#1657D8) or shorthand (#15d). - The HSL value appears instantly, along with RGB and a live color preview.
- Click Copy and paste it straight into your CSS.
Why designers convert HEX to HSL
HEX codes are compact but opaque — you can't look at #1657D8 and know how to make it 10% darker. HSL fixes that. It splits a color into three human-readable knobs: Hue (where it sits on the color wheel, 0–360°), Saturation (how vivid it is) and Lightness (how bright it is). Once your color is in HSL, building a palette becomes arithmetic: darker hover state? Lower the lightness. Muted background version? Drop the saturation. Same brand feel, zero guesswork — which is why modern CSS systems and design tokens increasingly prefer hsl() notation.
The same color, three ways
All three notations describe the identical color: #1657D8 = rgb(22, 87, 216) = hsl(220, 82%, 47%). Conversion is exact — no quality or accuracy is lost. Need to go in other directions (RGB→HEX, HSL→HEX)? Use our full Color Converter. Want to grab the hex from a photo first? The Image Color Picker reads any pixel with one click.
Is it private and safe?
Yes. The math runs entirely in your browser on your own device — nothing is uploaded or logged. It even works offline once the page has loaded.
Frequently asked questions
How do I convert HEX to HSL?
Paste the hex code above — the HSL appears instantly with a copy button. Shorthand codes like #15d work too.
What does HSL stand for?
Hue (0–360° on the color wheel), Saturation (0–100% vividness) and Lightness (0–100% brightness).
Why use HSL instead of HEX?
HSL is adjustable by eye: darker = lower lightness, muted = lower saturation. Perfect for palettes and hover states.
Is the conversion exact?
Yes — HEX and HSL describe the same RGB color, so conversion is mathematically exact (rounded to whole numbers).
Is it free?
Completely free, no sign-up, nothing uploaded.