About RGB to HSL
RGB to HSL takes a decimal rgb() color and describes it in hue, saturation and lightness. Running rgb(79, 70, 229) through the tool gives hsl(243, 76%, 59%) — the same color expressed in the notation that makes it easy to reason about how bright or how vivid it is.
The conversion finds the largest and smallest of the three channels. Their average sets the lightness, their difference drives the saturation, and whichever channel is largest determines which sector of the color wheel the hue falls in. Hue, saturation and lightness are all rounded to whole numbers so the result stays readable.
The practical value lies in the middle two figures. Once you know a color sits at 76% saturation, you can dial that percentage down to mute it or up to intensify it and feed the adjusted triple into HSL to HEX — a far more predictable way to make a related color than editing the raw red, green and blue channels.
What is produced is the HSL triple alone. The page does not report the original RGB values back alongside it, so a manual check that nothing was lost means holding the input in view while you read the output. There is no support for colour spaces beyond sRGB — a display-P3 or wide-gamut value has no path through here — and no perceptual alternative such as LCH or OKLCH is offered, which is where the limitation of an HSL lightness figure shows up most plainly. As with the hex-based conversion, no contrast ratio or luminance is calculated, and there is no adjustment interface: the figures are reported for you to act on elsewhere rather than sliders you can drag and watch update.
How to use RGB to HSL
- 1 Enter the color as an rgb() or rgba() value.
- 2 Read the hsl() triple — hue in degrees, saturation and lightness as percentages.
- 3 Change the saturation or lightness figures and convert back to see the effect on the hex value.
Frequently asked questions
How is saturation calculated from RGB?
It is derived from the gap between the strongest and weakest channel, relative to how close they sit to the extremes. A color whose three channels are equal has zero saturation and reads as a grey.
Why does hue come out as 0 for greys?
When the three channels are identical there is no dominant channel, so the hue is undefined. The tool reports 0 degrees, which is the conventional choice for that case.
Is the lightness the same as perceived brightness?
No. HSL lightness is the average of the largest and smallest channels, a simple geometric measure. Perceived brightness depends on how the eye weights each channel, which is why relative luminance is calculated differently.
Does the output include alpha?
No. The hsl() line describes the opaque color. If the input carried an alpha channel it is parsed but not reflected in the HSL result.
Free, online, and private
Free to use
RGB to HSL is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How RGB to HSL behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Output format | hsl(243, 76%, 59%) — whole numbers with the percent signs included |
| Rounding | hue, saturation and lightness are each rounded to the nearest whole number |
| Lightness definition | the midpoint of the largest and smallest channel, so a pure colour such as red reports lightness 50 percent |
| Greys | equal channels report hue 0 with saturation 0 percent, so every grey shares the same hue figure |
| Update mode | live |
Compiled from the implementation of this tool and checked against it by itoolnet.
What RGB to HSL does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- The rounding makes the printed triple an approximation: converting it back to hex can land on a neighbouring colour rather than the original, so keep the source value if you need to return to it exactly.
- Lightness here is the arithmetic midpoint of two channels rather than a perceptual figure, so two colours that look equally bright to the eye can report noticeably different lightness percentages.
- No alpha is carried through and no extra row is offered. A semi-transparent input converts exactly like its opaque twin, and nothing in the output hints that a transparency value was ever present.
Tested and documented by itoolnet, the team that builds and maintains this site.