Color Converter

Continue in the tool

More pages for this tool

hex to hsl

Convert HEX to HSL

HSL describes the same color HEX does, in a different way: instead of three light channels, it uses a hue angle and two percentages. This page starts from #a855f7 and shows the angle, saturation and lightness that come out of it, useful for anyone adjusting a theme by lightness instead of channel by channel.

What each part of HSL means

Hue (H) is a 0-to-360-degree angle on the color wheel: 0° is pure red, 120° is pure green and 240° is pure blue, the three primaries spaced 120 degrees apart. Saturation (S) and lightness (L) are 0-to-100% percentages: saturation measures how far the color sits from gray, lightness measures how far it sits from black or white.
A counter-intuitive fact about the model: 50% lightness with 100% saturation is the purest version of that hue, the same one full-channel RGB would produce. Above 50%, lightness moves toward white, below 50% it moves toward black. That is why pure red, rgb(255, 0, 0), shows up as hsl(0, 100%, 50%), exactly at the midpoint of the lightness scale.
The hue calculation uses the dominant RGB channel and the gap between the highest and lowest channel, and the result is rounded to the nearest degree. That means a HEX code can produce a hue that differs by one unit between calculators that round at different points in the math: #a855f7, for instance, lands on 271°, not 270°, because the division does not come out even.

HEX → HSL examples

Highlight purple

Input: #a855f7
Expected output: hsl(271, 91%, 65%)

Lightness at 65%, above the midpoint, is why this purple reads as light rather than as its most saturated version.

Bright orange

Input: #f97316
Expected output: hsl(25, 95%, 53%)

At 53% lightness, close to the midpoint of the scale, this color sits near the purest orange of that hue.

Red at the exact 50% point

Input: #ff0000
Expected output: hsl(0, 100%, 50%)

Hue 0°, saturation 100% and lightness at exactly 50%: this is the textbook case showing the purest version of a hue.

Full tool FAQ

Does the tool convert the same color between HEX, RGB, HSL and other formats?

Yes. The idea is to show equivalent representations of the same color in different notations, making it easier to use the value across CSS, design systems, visual documentation and design-to-code workflows. You type in one format and get all the others synchronized at once, including HSV, CMYK, LAB and XYZ.

Do HEX and RGB represent the same color?

What is the difference between HEX, RGB and HSL?

What does a color's alpha channel mean?

Why can the same color look different on different screens?

When does HSL make more sense than HEX?

Do CMYK and RGB serve the same purpose?

Is every color conversion perfectly accurate?

Frequently asked questions

Why is HSL lightness different from HSV value (V)?

Because they are different formulas over the same RGB channels. HSL lightness is the average of the highest and lowest channel, so pure white sits at 100% and black at 0%, while HSV value uses only the highest channel, so black and a fully saturated color can share the same high value.

Can hue go above 360 degrees?

Not in the final result. The color wheel has exactly 360 degrees and the calculation always normalizes the angle into that range, so 370° and 10° describe the same hue and the converter always returns a value between 0 and 359.

Why does the same HEX sometimes show a different HSL degree on another site?

Because hue is rounded to the nearest whole degree, and the division behind that number is rarely exact. A one-degree gap, like 270° versus 271°, usually comes from where each implementation rounds, not from a conversion error.

Next steps

Continue in the tool

Open full tool

hex to hsl

Convert HEX to HSL

What each part of HSL means

Hue (H) is a 0-to-360-degree angle on the color wheel: 0° is pure red, 120° is pure green and 240° is pure blue, the three primaries spaced 120 degrees apart. Saturation (S) and lightness (L) are 0-to-100% percentages: saturation measures how far the color sits from gray, lightness measures how far it sits from black or white.

A counter-intuitive fact about the model: 50% lightness with 100% saturation is the purest version of that hue, the same one full-channel RGB would produce. Above 50%, lightness moves toward white, below 50% it moves toward black. That is why pure red, rgb(255, 0, 0), shows up as hsl(0, 100%, 50%), exactly at the midpoint of the lightness scale.

The hue calculation uses the dominant RGB channel and the gap between the highest and lowest channel, and the result is rounded to the nearest degree. That means a HEX code can produce a hue that differs by one unit between calculators that round at different points in the math: #a855f7, for instance, lands on 271°, not 270°, because the division does not come out even.

HEX → HSL examples

Highlight purple

Input: #a855f7
Expected output: hsl(271, 91%, 65%)

Lightness at 65%, above the midpoint, is why this purple reads as light rather than as its most saturated version.

Bright orange

Input: #f97316
Expected output: hsl(25, 95%, 53%)

At 53% lightness, close to the midpoint of the scale, this color sits near the purest orange of that hue.

Red at the exact 50% point

Input: #ff0000
Expected output: hsl(0, 100%, 50%)

Hue 0°, saturation 100% and lightness at exactly 50%: this is the textbook case showing the purest version of a hue.

Full tool FAQ

Does the tool convert the same color between HEX, RGB, HSL and other formats?

Do HEX and RGB represent the same color?

What is the difference between HEX, RGB and HSL?

What does a color's alpha channel mean?

Why can the same color look different on different screens?

When does HSL make more sense than HEX?

Do CMYK and RGB serve the same purpose?

Is every color conversion perfectly accurate?

Frequently asked questions