HEX to HSL

Turn any HEX code into HSL instantly, ready to tune by hue, saturation and lightness.

Step one — Paste your HEX value

Also accepts a three-digit hex like #16F.

Step two — Your HSL color

Step three — The same color, every format

Steps to convert HEX to HSL

Paste your hex code into the field, with or without the hash.
Read the hsl() value that appears, as hue, saturation and lightness.
Click it to copy, or note the three numbers to start tweaking.
Want to keep editing? Open the result in the HSL picker.

What the HSL value tells you

Where a hex code is three opaque pairs, HSL splits the same color into three numbers you can actually reason about. For #1E90FF the converter returns hsl(210, 100%, 56%):

Part	Value	Means
Hue	210	Angle on the wheel, here a blue
Saturation	100%	Fully vivid, no gray
Lightness	56%	Just above mid, a clean bright blue

How HEX to HSL conversion works

The hex code is first read as RGB, then those three channels are recombined into hue, saturation and lightness. Hue comes from which channel is strongest and by how much, saturation from the spread between the highest and lowest channel, and lightness from their midpoint. Because both notations describe the same sRGB color, nothing is lost beyond rounding the percentages to whole numbers.

Why HSL is easier to edit than HEX

A hex code is great for storing a color but hopeless for adjusting one, and that is exactly what HSL fixes. Want a darker hover state? Drop the lightness and leave the rest. Want the same color muted? Lower the saturation. Trying to do either by hand in hex means recomputing all six digits, which is why converting to HSL first is the saner way to build variations.

What HEX to HSL is used for

Building hover, active and disabled states by shifting only the lightness.
Making tints and shades of one brand color without changing its hue.
Generating a matching set with the Scheme Generator.
Muting or boosting a color’s vividness through its saturation alone.

Worked example: #1E90FF becomes hsl(210, 100%, 56%). Convert back any time with HSL to HEX.

Do HEX and HSL describe the same colors?

Yes. They are two notations for the same sRGB colors, so the conversion is lossless within rounding.

Why are my HSL numbers slightly rounded?

Hue, saturation and lightness are usually rounded to whole numbers for readability, which can differ by a fraction from the raw value.

How do I darken a color in HSL?

Keep the hue and saturation, then lower the lightness percentage; raising it lightens the color instead.

Is HSL the same as HSB or HSV?

No. HSL pairs hue and saturation with lightness, while HSB/HSV use brightness, so their third value behaves differently.