Color · Converter
RGB to HSL converter.
Type red, green and blue (0 to 255) and get hue, saturation and lightness. Edit the HSL side and the RGB follows. rgba() and hsla() alpha are supported.
Convert both ways
All formats
Enter a color to see every format.
How RGB to HSL works
The formula
This is the rgbToHsl sample code from CSS Color 4, section “Converting sRGB Colors to HSL”. Divide each channel by 255, then:
- max and min of the three channels; d = max − min.
- Lightness L = (max + min) ÷ 2.
- Saturation S = 0 if d = 0 (a grey) or L is 0 or 1; otherwise S = (max − L) ÷ min(L, 1 − L).
- Hue (degrees): if red is max, H = (G − B) ÷ d, plus 6 when G < B; if green is max, H = (B − R) ÷ d + 2; if blue is max, H = (R − G) ÷ d + 4. Multiply by 60. A grey has no hue and shows 0.
Worked example, rgb(255, 87, 51): channels 1.000, 0.341, 0.200; max 1.000, min 0.200, d 0.800. L = 0.600 (60%), S = 0.400 ÷ 0.400 = 1 (100%), H = (0.341 − 0.200) ÷ 0.800 × 60 = 10.6, which rounds to 11. That is hsl(11, 100%, 60%).
Rounding. Hue, saturation and lightness are shown as whole numbers, so converting back can land one RGB step away from where you started.
Sources
- CSS Color Module Level 4, W3C Candidate Recommendation Draft (retrieved October 16, 2026).
Cite this page: TNAADO Tools, “RGB to HSL Converter,” tools.tnaado.ca/color/rgb-to-hsl/, 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%) |
RGB to HSL FAQ
How do I convert RGB to HSL?
Scale the channels to 0-1, find the largest and smallest, average them for lightness, divide the spread by min(L, 1 − L) for saturation, and use the largest channel to pick the hue formula, times 60 degrees. The steps above include a worked example for rgb(255, 87, 51).
Why is the hue 0 for grey, black and white?
When red, green and blue are equal there is no dominant direction on the color wheel, so hue is undefined. The tool shows 0 and a saturation of 0%.
Can hue be 360?
No. A computed hue that rounds to 360 wraps to 0, since 360 degrees is the same point on the wheel as 0.
What about rgba() and transparency?
Alpha carries over unchanged. rgba(255, 87, 51, 0.5) gives hsla(11, 100%, 60%, 0.5).
Are the percentages exact?
They are rounded to whole numbers, as most color pickers show them. The unrounded values are longer decimals; rounding is why a round trip can differ by one step.
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.