HEX to HSL Converter
Use this HEX to HSL converter to turn a hex code like #3b82f6 into hue, saturation and lightness and a ready-to-paste hsl() string. It updates live in your browser, with nothing uploaded and no sign-up.
Pick or paste a color
Edit any field — HEX, RGB, HSL, HSV, CMYK or OKLCH — and the rest update instantly. Copy the CSS string you need.
How to convert HEX to HSL
Enter your hex code
Type or paste a hex value such as #3b82f6 into the HEX field.
Read the HSL values
Hue, saturation and lightness update instantly, alongside RGB, HSV, CMYK and OKLCH for the same color.
Copy the hsl() string
Copy the result as a CSS value like hsl(217 91% 60%) and paste it into your stylesheet.
Why convert HEX to HSL
HSL describes a color by hue, saturation and lightness, which is much friendlier than a hex code when you want to nudge a shade lighter, dial down its intensity, or build a set of tints from one base color. This HEX to HSL converter gives you those three values from any hex input and lets you edit them to find the variation you want.
The converter is two-way, so you can also adjust the HSL fields and read back the matching hex for your CSS or design tool. The math runs in your browser on every change, so it is instant and your colors never leave your device.
Frequently asked questions
How do I convert a hex code to HSL?
Paste the hex value into the HEX field and read the hue, saturation and lightness values, which update instantly.
What do the HSL numbers mean?
Hue is an angle from 0 to 360 degrees, while saturation and lightness are percentages from 0 to 100.
Can I edit HSL and get the hex back?
Yes. The converter works both ways, so changing the HSL fields updates the matching hex code automatically.
Is HEX to HSL conversion exact?
It uses the standard HSL formula. Small rounding can occur because HSL is stored with limited precision, but a round trip stays visually identical.
Does this upload my color anywhere?
No. The HEX to HSL conversion runs entirely in your browser with no upload and no sign-up.