Blog
Unit converters

HEX to HSL converter

Enter a HEX color code, and the converter computes its representation in the HSL model (Hue, Saturation, Lightness): hue in degrees around the color wheel, saturation and lightness in percent. HSL is more convenient than HEX for intuitively adjusting hue independently of brightness.

Your data never leaves this device

Result

hsl() string
Hue (H)
Saturation (S)
Lightness (L)

This page has no server side at all. The table you paste is parsed by JavaScript inside your own browser, the chart is drawn on a canvas element on your machine, and the export file is assembled locally. Nothing is uploaded, stored or written to any log. You can disconnect from the network after the page has loaded and everything will still work — which is the simplest way to verify the claim yourself.

Facts and limits of this method

Hue (H) 0 to 360 degrees — position on the color wheel
Saturation (S) 0% (gray) to 100% (pure color)
Lightness (L) 0% (black) to 100% (white), 50% is the "pure" color with no black or white mixed in
Rounding All three values are rounded to whole numbers

When it misleads you

How it is calculated

The HEX code is first converted to plain RGB (three numbers from 0 to 255), as in the HEX to RGB converter.

The RGB values are normalized to the 0–1 range (divided by 255). Lightness is the average of the maximum and minimum channel.

If the maximum and minimum channels are equal (the color is gray), saturation and hue are zero. Otherwise, saturation is computed from the difference between the max and min relative to lightness, and hue is computed based on which of the three channels (R, G or B) is the maximum.

The resulting hue, saturation and lightness fractions are converted to degrees (0–360) and percent (0–100) and rounded to whole numbers.

Questions and answers

Why does a gray color show a hue of 0°?

For a fully gray color (where R=G=B), hue is mathematically undefined because saturation is zero — any hue value looks the same at zero saturation. 0° is just a convention, not a meaningful value.

What does 50% lightness mean?

It's the "pure" color of that hue and saturation, with no black (closer to 0%) or white (closer to 100%) mixed in.

Is HSL more accurate than HEX?

No, it's just another way of writing the same color — both formats describe the same point in color space, just with different coordinates.

Is my data sent anywhere?

No, the whole calculation runs in your browser.

Related tools

All tools