RGB to HSL Converter

What HSL tells you that RGB doesn’t

An RGB value is a hardware recipe: how strongly to drive the red, green and blue subpixels of a display, each on a 0–255 scale. Screens need exactly that, but people read it poorly — nobody looks at rgb(53, 100, 196) and immediately knows whether it’s a denim, a cobalt or a navy, let alone how to make it “a little lighter” without wrecking it.

HSL rearranges the identical information into three human-shaped dials: hue (the angle on a 0–360° color wheel), saturation (distance from gray, 0–100%) and lightness (position between black at 0% and white at 100%). Nothing is gained or lost in the move — HSL is the sRGB cube described in cylindrical coordinates, so every rgb() value has exactly one HSL spelling and vice versa.

The max/min/chroma algorithm, step by step

Every RGB to HSL conversion follows the same five moves:

• Normalize. Divide each channel by 255 so R′, G′ and B′ land between 0 and 1.
• Find the extremes. max is the strongest channel, min the weakest, and their gap Δ = max − min is the chroma — a direct measure of how colorful the value is.
• Lightness. L = (max + min) ÷ 2. Note that it averages only the two extremes; the middle channel has no say.
• Saturation. If Δ = 0 the color is achromatic and S = 0. Otherwise S = Δ ÷ (1 − |2L − 1|): the denominator is the largest chroma possible at this lightness, so S expresses chroma as a fraction of what’s achievable. For L ≤ 50% it simplifies to Δ ÷ (max + min).
• Hue. The winning channel picks the sector: if max is R′, H = 60° × ((G′ − B′) ÷ Δ); if max is G′, H = 60° × ((B′ − R′) ÷ Δ + 2); if max is B′, H = 60° × ((R′ − G′) ÷ Δ + 4). A negative result wraps by adding 360°.

Worked example: rgb(53, 100, 196)

Here is the complete arithmetic for this page’s sample color. Because every step is a ratio, the ÷255 cancels wherever channels are compared, which keeps the fractions exact:

• Normalize: R′ = 53 ÷ 255 ≈ 0.2078, G′ = 100 ÷ 255 ≈ 0.3922, B′ = 196 ÷ 255 ≈ 0.7686.
• Extremes: max = B′ ≈ 0.7686, min = R′ ≈ 0.2078, so Δ = 143 ÷ 255 ≈ 0.5608.
• Lightness: L = (0.7686 + 0.2078) ÷ 2 ≈ 0.4882 → 48.8%.
• Saturation: L is below one half, so S = 143 ÷ (196 + 53) = 143 ÷ 249 ≈ 0.5743 → 57.4%.
• Hue: blue is the maximum, so H = 60 × ((53 − 100) ÷ 143 + 4) = 60 × 3.6713 ≈ 220.3° (exactly 220.2797…°).

Result: hsl(220.3, 57.4%, 48.8%) — a mid-lightness, solidly saturated blue sitting between azure (210°) and true blue (240°). Feed those rounded HSL numbers back through the reverse formula and, after rounding to whole channels, rgb(53, 100, 196) reappears.

Common RGB to HSL conversions

A few fixed points are worth memorizing — full primaries sit at 50% lightness with 100% saturation, and grays always report 0% saturation:

When HSL beats RGB in real code

Any edit a designer would describe with words like lighter, softer or warmer is a one-number change in HSL but a three-channel balancing act in RGB. Typical wins:

• Hover and pressed states — keep H and S, shift L by 8–10 points: hsl(220, 57%, 49%) darkens to hsl(220, 57%, 39%) and still reads as the same brand blue.
• Design-token ramps — generate the 100–900 shades of a palette by holding hue fixed and stepping lightness in even increments.
• Muting and disabled states — pull S toward 0 to gray an element out without letting its hue drift.
• Chart series colors — rotate H in equal steps while pinning S and L, so categories differ in hue but carry equal visual weight.
• Review-friendly stylesheets — hsl(220, 57%, 49%) announces “medium blue” at a glance; the equivalent rgb() announces nothing.

One honest caveat: HSL is not perceptually uniform. A ten-point lightness step looks bigger on yellows than on blues, and a 50%-lightness yellow appears far brighter to the eye than a 50%-lightness blue. When uniformity matters — accessible ramps, measuring color difference — reach for OKLCH; for quick programmatic tweaks, HSL remains the pragmatic standard.

Edge cases: gray, wrap-around and rounding

• Grays report hue 0 and saturation 0%. When R = G = B, Δ is 0, there is no dominant wavelength, and hue is mathematically undefined; converters print 0° purely by convention. hsl(0, 0%, 50.2%) and hsl(137, 0%, 50.2%) paint the identical pixel.
• Black and white are the extreme case. At L = 0% or 100% the saturation denominator 1 − |2L − 1| becomes 0; the resulting 0 ÷ 0 is defined as S = 0 rather than left to blow up.
• Hue lives on a circle.rgb(255, 0, 1) works out to 359.8°, one step short of red’s 0° — treat 0° and 360° as the same direction and don’t be surprised by near-360 hues on reddish colors.
• Rounding explains tool disagreements. The exact hue above is 220.2797…°; this converter prints one decimal (220.3) while others truncate to 220. The gap is invisible, but it is why two converters can show different last digits for the same input.

Every calculation on this page happens locally — the math runs 100% in your browser and the values you paste are never transmitted anywhere. For the opposite direction, the HSL to RGB converter walks the reconstruction formula with the same rigor, and the universal Color Converter adds Lab, LCH and OKLCH readouts for the identical input.