Result
All calculations run locally in your browser: parsing, chart, export. Disconnect the network and the page keeps working.
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
- The HEX → HSL conversion is an exact mathematical formula with no information loss: converting back HSL → HEX from those same rounded values can produce a HEX code that differs by 1 unit in some channel due to accumulated rounding of intermediate numbers.
- For purely gray colors (R=G=B), hue is mathematically undefined (saturation is zero, and any hue value visually looks like the same gray) — the converter shows a hue of 0° in this case, which is a technical convention, not an error.
- All three values are rounded to whole numbers for readability — if higher precision is needed (for exact reproduction in a design system, for example), use the non-integer intermediate values from the math formula directly.
- Like RGB and HEX, HSL carries no color-profile information — it's simply another way of describing the same numbers, not a different color space with different perceptual accuracy.
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.