HSL is the notation people think in. RGB is the notation machines want. Canvas contexts, WebGL uniforms, image buffers, PDF generators, LED strips and native mobile colour APIs all expect three channel numbers, and almost none of them accept a hue angle. Anywhere those two worlds meet, a conversion has to happen.
It happens here on your device. The transform is about twenty lines of arithmetic, so there is no upload, no queue and no daily limit, and a palette that has not been announced yet never leaves your machine.
When you need to convert HSL to RGB
The usual trigger is a handoff. Someone has designed a palette in HSL because it is easy to reason about, and now it has to be implemented somewhere that only speaks channels. Chart libraries, canvas animations and shader uniforms are the three places this comes up most often, since all three take numeric colour rather than parsing a CSS string.
The second trigger is arithmetic. Blending, averaging and interpolating colours are all defined on channels. Averaging two hue angles is meaningless when they sit on opposite sides of the wheel, because the midpoint of 350 and 10 degrees is 180 rather than 0, so a mixing routine converts to RGB first.
- Feeding a canvas or WebGL call that takes numeric red, green and blue rather than a CSS string.
- Passing colour into a chart, mapping or plotting library that expects channel arrays.
- Blending or interpolating between two colours, which is only well defined on channels.
- Producing a hex code for a stylesheet from a colour you designed on the wheel.
- Sending a colour to hardware such as an LED controller or a printer driver.
How the conversion works
The algorithm starts by computing chroma, which is the range the three channels will span. Chroma is one minus the absolute distance of lightness from the midpoint, multiplied by saturation. At a lightness of 0 or 100 the chroma is zero, which is why black and white have no hue no matter what angle you enter.
The hue angle is then divided by 60 to find which of the six segments of the wheel the colour lives in. Inside that segment one channel sits at the top of the chroma range, one at the bottom, and the third moves linearly between them. Finally a constant offset lifts all three channels so the midpoint matches the requested lightness.
Multiplying by 255 and rounding produces the channel values you see. That rounding is the only lossy step, and it moves nothing by more than half a unit out of 255.
Every one of those steps runs in your browser, so this HSL to RGB converter never sends a colour anywhere. That matters less for privacy than it does for speed: the result updates as you drag a slider rather than after a round trip.
Reading the hue angle to rgb channels relationship
Six hue angles are worth memorising because they are the corners of the RGB cube. Red sits at 0, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. At full saturation and 50 percent lightness those six produce channel values made entirely of 0 and 255.
Everything between the corners has one channel sliding. A hue of 30 degrees, halfway from red to yellow, produces a full red channel, a half green channel and no blue at all, which is orange. Understanding that pattern makes it much easier to predict what a hue change will do before you make it.
The wheel wraps, so 370 degrees is the same colour as 10 degrees. This tool accepts angles outside the 0 to 360 range and normalises them, which is convenient when you are generating hues programmatically by repeatedly adding an offset.
Getting the most out of this HSL to RGB converter
Watch the channels as you drag the saturation slider down. They converge on a single value, and the value they converge on is the lightness expressed on a 0 to 255 scale. That is the clearest demonstration of what saturation actually controls, and it makes obvious why hue stops mattering once saturation reaches zero.
Watch them again as you push lightness above 50. The lowest channel starts to climb while the highest is already pinned at 255, which is why very light colours cannot also be very saturated. The same happens in reverse below 50. This ceiling is a property of the HSL model itself, not a limitation of the tool, and it is the reason a naive tint scale built in HSL loses saturation at both ends.
The output includes the modern space separated rgb notation, the legacy comma form, the hex code and a plain comma separated triplet for pasting into code that wants three numbers.
HSL colour wheel values and their limits
HSL colour wheel values are convenient but they are not perceptually uniform. Equal steps in hue do not look like equal steps to the eye: the yellow and green region covers a lot of visible difference in a narrow band of angles, while the blue region covers very little across a wide band. A palette built by adding a constant hue offset will therefore feel unevenly spaced.
If perceptual evenness matters, generate the palette in OKLCH and convert the results here or with a dedicated tool. If you only need a quick related colour, HSL is more than good enough and considerably easier to hold in your head.
| Hue | Colour | RGB |
|---|---|---|
| 0deg | Red | 255, 0, 0 |
| 60deg | Yellow | 255, 255, 0 |
| 120deg | Green | 0, 255, 0 |
| 180deg | Cyan | 0, 255, 255 |
| 240deg | Blue | 0, 0, 255 |
| 300deg | Magenta | 255, 0, 255 |
How to convert HSL to RGB
- 1
Set the hue
Drag the hue slider or type an angle in degrees. Values outside 0 to 360 are wrapped automatically.
- 2
Set saturation and lightness
Both are percentages. Saturation controls distance from grey, lightness runs from black at 0 to white at 100.
- 3
Adjust alpha if needed
Lower the alpha slider to produce an rgb value with a slash separated alpha, or leave it at 100 percent.
- 4
Copy the channel values
Take the modern rgb notation, the legacy comma form, the hex code or the bare comma separated triplet.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the hsl to rgb converter.
Yes. Set the alpha slider below 100 percent and the output switches to the modern slash separated form, rgb(64 128 255 / 50%), which every current browser accepts. Leave alpha at 100 percent and you get the plain three channel notation instead.
Because your saturation is at or near zero, which makes the colour a neutral grey. In a grey every channel carries the same value, and that value corresponds directly to the lightness percentage you entered scaled onto the 0 to 255 range.
The angle wraps, so 400 degrees produces exactly the same colour as 40 degrees. This is deliberate because generating a palette by repeatedly adding an offset naturally produces angles beyond a full turn, and normalising them by hand is a pointless step.
The HSL model itself prevents it. Above 50 percent lightness the achievable chroma shrinks as the darkest channel is forced upward, so high lightness and high saturation cannot coexist. That ceiling is mathematical rather than a limitation of this converter.
Yes. Both HSL and plain rgb notation in CSS describe positions in the sRGB colour space, so the conversion never leaves it. Wide gamut colours need a different notation such as color(display-p3 ...) or OKLCH, which cannot be expressed as an HSL triplet.
Enter the three numbers into the separate fields rather than pasting the whole function. Splitting them keeps validation strict, so a missing percent sign or a stray unit is caught immediately instead of quietly producing a colour you did not ask for.
No. The conversion is a short piece of arithmetic executed in the page, with no network request involved at any point. You can verify it by opening the network panel in developer tools and moving every slider on the page.