What HSL describes
HSL stands for hue, saturation and lightness. Hue is an angle from 0 to 360 on the color wheel: around 0 is red, 120 is green and 240 is blue. Saturation is how intense the color is, from 0% (gray) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the pure color) to 100% (white).
A HEX code hides this structure inside three base-16 pairs. Converting to HSL exposes it. For example, #FF8000 is rgb(255, 128, 0), which works out to hsl(30, 100%, 50%): an orange hue at full saturation and middle lightness.
The tool first reads the HEX code as RGB and then calculates HSL from that, rounding each part to a whole number.
Why developers and designers prefer HSL for adjustments
HSL is much easier to reason about when you are building variations of one color. To make a hover state darker, lower the lightness. To get a muted version, lower the saturation. To find a related accent, shift the hue. Doing the same with HEX means guessing at three base-16 pairs.
That is why many design systems define a base color in HEX but keep a set of tints and shades in HSL. Converting your brand HEX code to HSL gives you the starting numbers.
If you want ready-made lighter and darker variants of one color, the color palette generator builds a set from a single base.
How to convert HEX to HSL with this tool
- Click the small color swatch to use your browser's picker, or type a code into the HEX color field. It starts with #5B4FF0.
- Read the result in the panel below, written as hsl(h, s%, l%). The starting color shows hsl(244, 84%, 63%).
- Check the preview swatch and code on the right to confirm the color is the one you meant.
- Select the text and copy it into your stylesheet or design tool.
The tool accepts three-digit shorthand such as #F80 and codes without the leading #. Everything happens in your browser.
Rounding and input notes
HSL values here are whole numbers. Because of that rounding, turning an HSL value back into HEX can land one or two steps off from where you started. For exact reproduction, keep the original HEX code.
If the code you type is not a valid three or six digit HEX value, the result panel shows the message asking for a valid 6-digit hex color instead of a result. Eight-digit codes with an alpha pair are not supported.
Grays have no meaningful hue, so for a color like #808080 the tool reports a hue of 0 and saturation of 0%. If you need the same color in several notations at once, use the color converter.