HEX to HSL Converter
Convert any HEX color to HSL in your browser. No signup, no tracking — and below, the math behind the conversion.
Example conversion
HEX
#3B82F6
HSL
hsl(217, 91%, 60%)
How the conversion works
Convert HEX to RGB first (each channel as 0–255). Normalise to 0–1 by dividing by 255. Find the min and max of the three. Lightness is `(max + min) / 2`. Saturation depends on lightness: above 0.5, `(max - min) / (2 - max - min)`; at or below, `(max - min) / (max + min)`. Hue depends on which channel is max — full formulas live in the CSS Color Level 4 spec. HSL is easier for designers to reason about (twist hue, lower lightness for hover state) than raw RGB or hex.
Convert any color, not just this one
Open the full color picker to pick any color visually and see it in HEX, RGB, HSL, and OKLCH at the same time. The picker also generates palettes (complementary, analogous, triadic, monochromatic) you can copy with one click.