Pick & Convert
HSL to RGB Converter
Enter hue from 0 to 360 and saturation and lightness from 0 to 100 to get RGB values and a HEX code. For example, hsl(280, 60%, 50%) is rgb(153, 51, 204).
Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.
How to use the HSL to RGB Converter
- Type the hue in degrees, then saturation and lightness as percentages.
- The RGB value appears at the top, with the HEX code and other formats in the table.
- Press Copy RGB to use it in code, a design tool or a document.
- Adjust lightness or saturation in small steps to explore variations of the same hue.
Examples
A violet
hsl(280, 60%, 50%) is rgb(153, 51, 204), or #9933CC.
A dark green
hsl(120, 100%, 25%) is rgb(0, 128, 0), or #008000.
A muted blue
hsl(210, 50%, 40%) is rgb(51, 102, 153), or #336699.
Tips
- Keep hue and saturation fixed and move lightness to build a quick light-to-dark scale.
- The converted HEX code is shown in the table, so you can copy RGB and HEX from one result.
Questions about the HSL to RGB Converter
Which ranges does the tool accept?
Hue from 0 to 360 degrees, and saturation and lightness from 0 to 100 percent. Values outside those ranges are rejected with a message.
Why convert to RGB if CSS supports hsl()?
Modern CSS accepts hsl(), but canvas code, image libraries, many design tools and older systems expect RGB or HEX.
What happens at saturation 0%?
The result is a gray: all three RGB channels are equal, whatever the hue.
Is hue 360 different from hue 0?
No. 360 degrees is a full turn, so it is the same angle as 0 and gives the same color.