HEX to HSL Converter

HSL describes a color by hue (the angle on the color wheel), saturation (how strong it is) and lightness (how close to black or white). It is easier to tweak by hand than HEX: keep the hue, lower the lightness, and you get a darker version of the same color. This converter turns HEX and rgb() codes into hsl() and hsla() — including the modern space-separated syntax — and HSL back into HEX and RGB, showing every step of the max/min formula.

How to use this tool

1. Choose HEX/RGB → HSL or HSL → HEX/RGB.
2. Enter a HEX code (3, 4, 6 or 8 digits) or rgb(), or the hue, saturation and lightness.
3. Pick how many decimals to show.
4. Copy the result; the working table shows how it was calculated. Paste a list for batch conversion.

Formula

L = (max + min) ÷ 2 · S = Δ ÷ (1 − |2L − 1|) · H = 60° × ((G′ − B′) ÷ Δ mod 6) if R is max, ((B′ − R′) ÷ Δ + 2) if G is max, ((R′ − G′) ÷ Δ + 4) if B is max

R′, G′, B′ are the channels divided by 255; max, min and Δ = max − min are taken over them. Grays have Δ = 0, so saturation and hue are 0. Going back, C = (1 − |2L − 1|) × S, X = C × (1 − |(H ÷ 60) mod 2 − 1|) and m = L − C ÷ 2.

Example

For #FF6347 (tomato): R′ = 1, G′ = 0.3882, B′ = 0.2784. Max 1, min 0.2784, Δ = 0.7216, so L = 0.6392, S = 0.7216 ÷ (1 − 0.2784) = 1 and H = 60 × (0.1098 ÷ 0.7216) = 9.1° — hsl(9.1, 100%, 63.9%). Going back, hsl(210, 50%, 40%) gives C = 0.4, X = 0.2, m = 0.2 and RGB (51, 102, 153) = #336699.