Color · Converter
HSL to RGB converter.
Type hue, saturation and lightness and get red, green and blue. Edit the RGB side and the HSL follows. hsla() and rgba() alpha are supported.
Convert both ways
All formats
Enter a color to see every format.
How HSL to RGB works
The formula
This is the hslToRgb sample code from CSS Color 4, section “Converting HSL Colors to sRGB”. With hue H in degrees and saturation S and lightness L as fractions from 0 to 1:
- a = S × min(L, 1 − L)
- For each channel with n = 0 (red), 8 (green) or 4 (blue): k = (n + H ÷ 30) mod 12
- channel = L − a × max(−1, min(k − 3, 9 − k, 1))
- Multiply by 255 and round.
Worked example, hsl(11, 100%, 60%): a = 1 × 0.4 = 0.4. For red k = 0.367, so min(−2.633, 8.633, 1) = −2.633, max(−1, −2.633) = −1 and red = 0.6 + 0.4 = 1.000, which is 255. For green k = 8.367, min(5.367, 0.633, 1) = 0.633 and green = 0.6 − 0.253 = 0.347, which is 88. For blue k = 4.367, min(1.367, 4.633, 1) = 1 and blue = 0.6 − 0.4 = 0.200, which is 51. That is rgb(255, 88, 51).
Hue wraps around, so 360 equals 0, 480 equals 120 and −120 equals 240.
Rounding. The RGB → HSL direction shows whole numbers, so hsl(11, 100%, 60%) comes from #FF5733 but converts back to rgb(255, 88, 51), one step off in green. The RGB values are the exact side.
Sources
- CSS Color Module Level 4, W3C Candidate Recommendation Draft (retrieved October 16, 2026).
Cite this page: TNAADO Tools, “HSL to RGB Converter,” tools.tnaado.ca/color/hsl-to-rgb/, formulas from the W3C CSS Color specifications, retrieved October 16, 2026.
20 common colors
Click Use to load a row into the converter. The names are CSS color names; CMYK is the simple screen formula described above.
| Color | HEX | RGB | HSL | CMYK | Load |
|---|---|---|---|---|---|
| black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) | |
| white | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) | |
| red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) | |
| lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) | |
| blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) | |
| yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) | |
| cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | cmyk(100%, 0%, 0%, 0%) | |
| magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | cmyk(0%, 100%, 0%, 0%) | |
| gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) | |
| silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | cmyk(0%, 0%, 0%, 25%) | |
| maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | cmyk(0%, 100%, 100%, 50%) | |
| olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | cmyk(0%, 0%, 100%, 50%) | |
| green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | cmyk(100%, 0%, 100%, 50%) | |
| purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | cmyk(0%, 100%, 0%, 50%) | |
| teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | cmyk(100%, 0%, 0%, 50%) | |
| navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | cmyk(100%, 100%, 0%, 50%) | |
| orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) | |
| pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | cmyk(0%, 25%, 20%, 0%) | |
| brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | cmyk(0%, 75%, 75%, 35%) | |
| gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | cmyk(0%, 16%, 100%, 0%) |
HSL to RGB FAQ
How do I convert HSL to RGB?
Find the chroma term a = S × min(L, 1 − L), then for each of red, green and blue evaluate L − a × max(−1, min(k − 3, 9 − k, 1)) where k = (n + H/30) mod 12 and n is 0, 8 and 4. Scale by 255. The steps above show a full worked example.
What ranges does HSL use?
Hue is 0 to 360 degrees, saturation and lightness are 0% to 100%. Hue outside 0-360 wraps around. Saturation or lightness outside 0-100 is reported as an error here, not clamped.
Can I paste hsl(…) straight in?
Yes. hsl(11, 100%, 60%), hsl(11deg 100% 60%) and plain 11 100 60 all work, and so does hsla(120, 100%, 25%, 0.5) for alpha.
Why are some RGB values off by one when I round trip?
HSL here is whole numbers, a coarser grid than the 16.7 million RGB colors. A color converted RGB to HSL and back can move one step. Converting HSL to RGB is deterministic.
Which is better for design, HSL or RGB?
HSL is easier to reason about when you want a lighter, darker or less saturated version of a color, because you change one number. RGB is what screens ultimately use and what image tools report. They describe the same sRGB colors.
Is anything I type sent to a server?
No. The conversion runs in your browser and nothing is uploaded or stored.
What this does, and what it does not
This converts between written forms of sRGB colors, the color space browsers use for CSS by default. It does not convert to other color spaces such as Display P3 or Lab. Everything runs in your browser; nothing you type is sent anywhere.