HSL to RGB Converter

HSL to RGB conversion with the math shown

Use this HSL to RGB converter when you have a color as hue, saturation and lightness but the place you need it only speaks red, green and blue. Canvas pixel data, most graphics libraries, LED controllers and many image APIs work with three 0–255 channels, not with degrees and percentages.

The two models describe the same sRGB colors. HSL is just a friendlier coordinate system laid over the RGB cube, which is why the conversion is exact apart from rounding to whole numbers at the end.

The formula used

The tool uses a compact form of the standard HSL-to-RGB algorithm. With S and L as fractions (64% = 0.64) and H in degrees:

a    = S × min(L, 1 − L)
k(n) = (n + H / 30) mod 12
f(n) = L − a × max(−1, min(k − 3, 9 − k, 1))

R = 255 × f(0)    G = 255 × f(8)    B = 255 × f(4)

It produces the same numbers as the textbook chroma-and-sector method, without a six-way branch on the hue.

Worked example: hsl(9, 100%, 64%)

Here a = 1 × min(0.64, 0.36) = 0.36 and H / 30 = 0.3.

R: k = 0.3  → min(−2.7, 8.7, 1) = −2.7 → max(−1, −2.7) = −1
   f = 0.64 + 0.36       = 1.00  → 255
G: k = 8.3  → min(5.3, 0.7, 1)   = 0.7
   f = 0.64 − 0.36 × 0.7 = 0.388 → 98.9 → 99
B: k = 4.3  → min(1.3, 4.7, 1)   = 1
   f = 0.64 − 0.36       = 0.28  → 71.4 → 71

hsl(9, 100%, 64%)  →  rgb(255, 99, 71)

The result is tomato, one of the CSS named colors.

What the parser accepts

• Legacy and modern CSS syntax: hsl(210, 100%, 50%) and hsl(210 100% 50%) both give rgb(0, 128, 255).
• Fractions for saturation and lightness: hsl(207, 0.44, 0.49) is read as 44% and 49%, giving rgb(70, 130, 180).
• Hue is read in degrees unless it carries a CSS angle unit: 0.5turn, 200grad and 3.1416rad are all converted to 180°.
• An alpha value is accepted but dropped from rgb() output. Use HSL to RGBA to keep it.

Common mistakes

Mixing up HSL and HSV is the classic one. Both start with hue and saturation, but the third number means something different, so hsl(0, 100%, 100%) is white while an HSV value of 0, 100%, 100% is pure red. If your numbers came from a color picker labelled HSB, convert them with the HSV tools instead.

Another is expecting a perfect round trip. Converting rgb(46, 139, 87) to HSL and rounding to whole percents gives hsl(146, 50%, 36%), which converts back to rgb(46, 138, 86). Keep decimals if you plan to go back and forth. The reverse direction lives at RGB to HSL, and HEX to RGB helps when your source is a hex code.

Convert HSL to RGB in Python

The standard library's colorsys module does the HSL to RGB math, with two traps. The function is named hls_to_rgb() and takes its arguments in that order: hue, lightness, saturation. Passing them in CSS order swaps two values without raising an error. It also works on a 0–1 scale throughout, so divide the hue by 360 and the percentages by 100 on the way in, then multiply each channel by 255 and round on the way out.

import colorsys

def hsl_to_rgb(h, s, l):
    """h in degrees, s and l in percent; returns 0-255 integers."""
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return round(r * 255), round(g * 255), round(b * 255)

print(hsl_to_rgb(9, 100, 64))    # (255, 99, 71)
print(hsl_to_rgb(207, 44, 49))   # (70, 130, 180)
print(hsl_to_rgb(146, 50, 36))   # (46, 138, 86)

The first color in the snippet is the one the converter above starts with; type the other two into it to compare each result with the script.