Hex to HSL Converter – Free, Online, Private

The conversion

The hex is decoded to bytes, then to the HSL model used by CSS. Hue is the angle around the color wheel in degrees, from 0 to 359 after rounding. Saturation and lightness are percentages. Gray colors, where the three bytes match, have saturation 0 and a hue of 0 because the hue is undefined and a number is still required. Lightness 0 is black and 100 is white regardless of hue. The formula is the standard piecewise one: find the max and min channel, lightness is their average, saturation depends on how far apart they are, and hue depends on which channel was the max.

Rounding

Bytes are discrete and HSL percentages are rounded to integers, so converting to HSL and back to hex can move a channel by one. That is expected. If you need a reversible transform, stay on hex or RGB. HSL is for editing. The page does not emit the space-separated modern syntax and does not emit OKLCH. OKLCH is on the full color tool, and it is a better space for perceptual steps, but hsl() is what older stylesheets already use.

Worked example

#6366f1 is a blue-violet. Its hue sits in the high 230s, saturation is high, and lightness is near the middle, which is why the color reads as a bright indigo rather than a pale tint or a navy. #ffffff is hsl(0, 0%, 100%). #000000 is hsl(0, 0%, 0%). Editing the lightness percentage and converting back through the RGB page is a quick way to build a hover state without opening a design tool.

Local and exact enough

The arithmetic uses the page's own function, not a server. For a brand color that must match a spec sheet, compare the hex you started from, not a hex you reconstructed from rounded HSL. The point of the page is the hsl() string you can paste into CSS today.

Frequently asked questions