About HEX to HSL
HEX to HSL restates a hex color in terms of hue, saturation and lightness — the notation designers usually think in when they are adjusting a color rather than copying it. #4F46E5 becomes hsl(243, 76%, 59%): a hue near the violet end of the wheel, fairly saturated, a little above mid lightness.
Hue is reported in degrees from 0 to 360, while saturation and lightness are percentages. That split is what makes HSL useful for theming: to build a hover state you change only the lightness, and to build a sibling color you change only the hue, leaving the other two components where they were.
The percentages are rounded to whole numbers. That keeps the notation clean and readable, but it also means a hex to HSL to hex round trip can be off by a step, so hold on to the original hex when an exact match matters.
Outside hue and the two percentages, nothing else is reported: there is no alpha component in the output even if the input carried an eight-digit hex, no hex value echoed back for comparison, no colour name, and no relative luminance or contrast ratio, so the page will not tell you whether the colour is usable as text on a given background. The notation is fixed at the comma-separated integer form, so the modern space-separated syntax and the fractional channel style are not available. Conversion is also one-way from hex, with the reverse handled by a separate tool, and no palette or harmony suggestions are generated from the result.
How to use HEX to HSL
- 1 Paste the hex color into the input — the three- and six-digit forms are both accepted.
- 2 Read the hsl() value, which is recomputed as you type.
- 3 Adjust the lightness or hue by hand to derive a related shade, then convert it back with HSL to HEX.
Frequently asked questions
Why are the saturation and lightness rounded?
The underlying values are rarely whole numbers, and printing many decimals would be noisy. Rounding to integers keeps the notation readable at the cost of a small precision loss on a round trip.
What does the hue number mean?
It is the angle on the color wheel: red sits near 0 or 360, green near 120 and blue near 240. The value is in degrees, matching the CSS hsl() function.
Is hsl() the same as hsv()?
No, and the two are easy to confuse. HSL runs from black at 0% lightness to white at 100%, with the pure color at 50%. HSV runs from black at 0% value to the pure color at 100%. The same color gives different numbers in each.
Can I use the output directly in CSS?
Yes. hsl() and hsla() are standard CSS functions, so the string printed here can be pasted into a stylesheet unchanged.
Free, online, and private
Free to use
HEX to HSL is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How HEX to HSL behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Output format | hsl(243, 76%, 59%) — three whole numbers with the percent signs written in |
| Rounding | degrees, saturation and lightness are each rounded to the nearest whole number |
| Accepted input | the shared colour parser, so 3, 4, 6 and 8-digit hex plus rgb(), hsl() and 30 named colours all resolve in this field |
| Greys | a colour whose channels are equal reports hue 0 and saturation 0 percent, so any mid grey reads as hsl(0, 0%, 50%) |
| Update mode | live — the result is recomputed on every keystroke, including half-typed values |
Compiled from the implementation of this tool and checked against it by itoolnet.
What HEX to HSL does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- Hue is rounded to a whole degree, so two colours differing by a fraction of a degree print identically and the line is a display value rather than a precise one — no decimal places are offered anywhere.
- A hex string of an unusual length is not rejected. The parser slices fixed two-character windows and ignores the tail, so #12345 is read as if it were #123405 instead of raising an error — always check what you paste.
- The alpha digits of an 8-digit value are parsed and then dropped, so a semi-transparent hex converts to exactly the same HSL line as its opaque counterpart, with no hint that anything was discarded.
Tested and documented by itoolnet, the team that builds and maintains this site.