Hex to HSL Converter

Hex to HSL converter

Paste a hex colour code and get the equivalent HSL — hue, saturation and lightness — instantly, with a live colour swatch and a ready-to-paste hsl() string for CSS. HSL is often more intuitive for design tweaks than hex: hue picks the colour, saturation controls vividness, and lightness goes from black to white.

How it works

The tool parses the hex into red, green and blue (0–255), expanding 3-digit shorthand if needed, then normalises each channel to 0–1. It finds the maximum and minimum of the three:

• Lightness = (max + min) / 2
• Saturation = (max − min) / (1 − |2L − 1|), or 0 if the colour is grey
• Hue is the angle determined by which channel is the maximum, computed from the differences between channels and multiplied by 60 degrees

Hue is rounded to a whole degree, saturation and lightness to whole percents.

Example

For #3b82f6, the RGB is 59, 130, 246 (normalised 0.231, 0.510, 0.965):

• max = 0.965 (blue), min = 0.231 (red)
• L = (0.965 + 0.231) / 2 = 0.598 → 60%
• S = (0.965 − 0.231) / (1 − |2×0.598 − 1|) ≈ 91%
• H ≈ 217° (blue region)

Result: hsl(217, 91%, 60%).

The whole conversion runs in your browser — nothing is uploaded.