About the RGB to HSL
This tool converts rgb() values to HSL, the hue-saturation-lightness model that is easier to reason about when adjusting a colour. Convert several at once, one per line. It accepts values with or without the rgb() wrapper.
The formula divides each channel by 255 before it does anything else, and that division is where hand-written implementations usually go wrong. Graphics code borrowed from a canvas or shader context often expects channels already scaled to 0 and 1, so feeding it 31, 193, 107 instead of 0.12, 0.76, 0.42 returns a blown-out result or divides by zero. This tool always takes 0 to 255 integers, or percentages if you write them with a percent sign.
Hue comes out as an angle, with red near 0 or 360, green near 120 and blue near 240. Watch the wrap whenever you average or sort by hue: the midpoint between 350 and 10 is 0, not 180, so a naive average of two reds returns cyan. The same wrap makes a plain numeric sort split the reds across both ends of the list, which is why chart libraries offset the hue before ordering a series.
To convert back, use HSL to RGB; to see all formats, the Color Converter. If you are converting so you can build hover and disabled states from one value, the Shades Generator does the lightness steps in a single pass.
How to use
- Paste rgb() values, one per line.
- Copy the hsl() values.
Common questions
- Why convert RGB to HSL?
- HSL is easier to adjust: lightness for tints and shades, saturation for muting, hue to shift the colour.
- Is alpha kept?
- Yes, rgba gives hsla.
- What are the output ranges?
- Hue 0 to 360, saturation and lightness 0 to 100 percent.