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.

Worked 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%).

Why HSL beats hex for design work

When you have a brand hex like #3b82f6 and want a lighter tint for a hover state, working in hex means guessing and re-deriving channels by hand. In HSL you just increase the lightness value: hsl(217, 91%, 75%) gives a lighter tint; hsl(217, 91%, 40%) gives a darker shade. Same hue, different lightness — no maths required.

For building design systems this is especially useful:

• Tints and shades: hold H and S fixed, vary L from 10% (near-black) to 95% (near-white).
• Muted variants: drop S to 30–40% while keeping H for a desaturated version of the same colour.
• Complementary colours: add 180° to the hue to find the direct complement — for H 217 (blue) the complement is H 37 (amber).

Common mistakes

A few things trip people up when working with HSL in CSS:

• Grey colours have undefined hue. When S is 0% the hue is meaningless; the tool shows 0°, which is the convention. Adjusting hue on a grey does nothing until you raise saturation.
• HSL and HSB/HSV are different. Many design tools (Figma, Photoshop) show HSB, where B is brightness and 100% brightness is the pure colour. In CSS HSL, 100% lightness is white, not the pure colour — the pure colour is L 50%. Do not mix them up.
• Short hex shorthand: #abc is valid and expands to #aabbcc — both 3-digit and 6-digit codes are accepted here.

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