HEX to HSL Converter Online for CSS

HSL splits a colour along axes that mean something, so you can edit it deliberately. Keep the hue, move the lightness, and the whole scale falls out: hover, active, disabled, card background. With HEX you would be guessing at six characters or reaching for a picker every time.

Achromatic colours have no position on the colour wheel — the red and blue channels are equal, so there is no angle to compute. The formula returns 0°, and with S at 0 that number changes nothing: hsl(0, 0%, 20%) and hsl(200, 0%, 20%) render the same grey.

They are rounded to whole numbers, so converting back can land one step off in an RGB channel. That is invisible to the eye, but if you diff screenshots in automated tests keep HEX as the source of truth and use HSL as the working notation while picking shades.

The classic syntax needs commas and percent signs: hsl(210, 100%, 56%). Current browsers also accept the space-separated form with alpha, hsl(210 100% 56% / 0.5). The hue can be a bare number; the deg unit is optional.

Entering all six characters is safer. Shorthand such as #1AF means #11AAFF and not every parser expands it, so if pressing the button leaves the result unchanged, double each character by hand and try once more.

No. Everything happens in the page script: the code is split into channels and recalculated inside the tab. The tool keeps no history, which is why a reload puts the default sample back into the field.