RGB to HSL Converter
RGB is how screens emit color, but HSL is how people describe it — by hue, how vivid it is, and how light or dark. Converting RGB to HSL repositions the same color onto a cylinder where those three properties become independent dials.
Enter red, green, and blue values from 0 to 255 below to see the equivalent hsl() string update live. This is handy for generating consistent tints and shades, and it all runs locally with nothing uploaded.
hsl(238, 100%, 71%)| RGB | Hue | Saturation | Lightness |
|---|---|---|---|
255, 0, 0 | 0° | 100% | 50% |
0, 128, 0 | 120° | 100% | 25% |
108, 114, 255 | 237° | 100% | 71% |
128, 128, 128 | 0° | 0% | 50% |
26, 147, 111 | 157° | 70% | 34% |
rgb(108, 114, 255)→hsl(237, 100%, 71%)The three channels are normalised, then mapped onto hue, saturation, and lightness.
Frequently asked questions
How do you calculate HSL from RGB?
Divide each channel by 255, find the maximum and minimum, and use them to compute lightness as the midpoint, saturation from their difference, and hue from which channel is largest. The results are scaled to degrees and percentages.
When is RGB to HSL conversion useful?
It is ideal for building color systems — once you have HSL you can generate consistent tints (raise lightness), shades (lower lightness), or analogous hues (rotate the hue) from a single base color.
Why is saturation 0% for grays?
When red, green, and blue are equal there is no dominant hue, so saturation is zero and only lightness varies. That is why all grays share 0% saturation.
Does this leave my browser?
No. The conversion is performed in JavaScript on your device with no network request.