The conversion in three steps
Scale each channel to the 0-1 range, then find the largest and smallest of the three. Lightness is the midpoint of those two. Saturation is their difference divided by 1 - |2L - 1|, which stretches the spread so that pure colours reach 100%. Hue comes from which channel won: red gives (G-B)/d, green gives (B-R)/d + 2, blue gives (R-G)/d + 4, all multiplied by 60 degrees.
The hex to RGB converter covers the same ground with a different mechanism.
Why HSL is easier to design with
In RGB there is no obvious way to make a colour slightly lighter — you have to nudge three numbers and hope the hue holds. In HSL you change one number. That is why design systems store palettes as hue plus a lightness ramp, and why CSS custom properties so often look like hsl(var(--brand-h) 100% 60%). Feed the result into the HSL to hex converter when you need a hex token back.
Greys and edge cases
When all three channels are equal the difference is zero, saturation is 0% and hue is undefined — the tool reports 0° by convention. Values are clamped to 0-255 and rounded, so decimals from a colour picker are accepted safely.
The whole conversion happens in your browser, so nothing you enter is uploaded. When you drop the lightness to build a text colour, verify it against your background: AA wants 4.5:1 for body copy and AAA wants 7:1.
The RGB to hex converter handles the same job in a slightly different way.
Frequently asked questions
- What is rgb(255, 87, 51) in HSL?
- hsl(11, 100%, 60%) — an 11 degree hue at full saturation and 60% lightness.
- Why is hue measured in degrees?
- Hue is a position on a colour wheel, so it runs 0-360 with red at 0, green at 120 and blue at 240.
- What does 50% lightness mean?
- It is the most vivid version of a hue. Above 50% the colour washes toward white, below it toward black.
- What happens with grey inputs?
- Grey has zero saturation and no meaningful hue, so the tool reports hue 0 with 0% saturation.
- What happens to the alpha channel of an rgba() colour?
- It is ignored — this converter takes the three opaque channels only, so paste the red, green and blue values and keep your alpha separately. HSL supports transparency as hsl(11 100% 60% / 0.5) if you need to write it back out.