HSL to RGB Converter
HSL is comfortable to author in, but many graphics APIs, canvas operations, and data formats expect plain RGB channels. This converter maps a hue/saturation/lightness triple back to the red, green, and blue values a screen actually uses.
Set the hue in degrees and the saturation and lightness percentages below to get the matching rgb() string and a live swatch. The hue-to-RGB math runs locally, so your color values never leave the page.
rgb(107, 114, 255)| HSL | Red | Green | Blue |
|---|---|---|---|
0, 100%, 50% | 255 | 0 | 0 |
120, 100%, 50% | 0 | 255 | 0 |
240, 100%, 50% | 0 | 0 | 255 |
237, 100%, 71% | 107 | 114 | 255 |
0, 0%, 50% | 128 | 128 | 128 |
hsl(237, 100%, 71%)→rgb(107, 114, 255)Hue, saturation, and lightness are projected back onto the RGB cube.
Frequently asked questions
How does HSL convert back to RGB?
Lightness and saturation produce two helper values, and the hue selects how those values blend across the red, green, and blue channels. Each channel is then scaled to the 0–255 range.
Why might RGB differ slightly when round-tripping?
Both directions involve floating-point math and rounding, so converting RGB to HSL and back can land one step away on a channel. The displayed color is unchanged.
What if lightness is 0% or 100%?
At 0% lightness every channel is 0 (black) and at 100% every channel is 255 (white), regardless of hue or saturation. Those edges are handled correctly here.
Is the conversion private?
Yes. It runs entirely in your browser in JavaScript, with no upload of your color values.