Why convert RGB to HSL?
RGB tells a screen how much red, green and blue light to emit, which is not how people think about color. HSL rearranges the same sRGB colors into three intuitive controls. Hue is the position on the color wheel in degrees (0° red, 120° green, 240° blue). Saturation is how vivid the color is, from 0% grey to 100% fully saturated. Lightness runs from 0% black through the pure color at 50% to 100% white.
That makes HSL ideal for building UI states and palettes in CSS. Keep the hue and saturation, lower the lightness by 8–10 points for a hover state, raise it for a subtle background tint. With CSS custom properties you can store the hue once — --brand-h: 217 — and derive a whole theme from it.
This converter shows the HSL value as you move the RGB sliders, explains each step of the calculation for your exact color, and generates a ten-step lightness scale you can copy straight into a design system.
How to use the RGB to HSL Converter
- Set the color with the Red, Green and Blue sliders, type exact values, use the picker, or paste
rgb(59, 130, 246)— HEX also works. - Read the hue, saturation and lightness, and choose whole numbers or one decimal place for more precision.
- Copy the
hsl(),hsla()or modern space-separated value. - Click any swatch in the lightness scale to copy a lighter tint or darker shade of the same hue.
Example
Deriving button states from one HSL hue with custom properties:
:root {
--brand-h: 217;
--brand-s: 91%;
}
.button {
background: hsl(var(--brand-h) var(--brand-s) 60%); /* ≈ rgb(59, 130, 246) */
}
.button:hover {
background: hsl(var(--brand-h) var(--brand-s) 52%);
}
.button-soft {
background: hsl(var(--brand-h) var(--brand-s) 95%);
}The RGB to HSL formula
- Divide R, G and B by 255 to get values between 0 and 1.
- Find the largest (max) and smallest (min) channel; Δ = max − min.
L = (max + min) ÷ 2S = Δ ÷ (1 − |2L − 1|), or 0 when Δ is 0 (a grey).- Hue depends on which channel is largest: red →
60 × ((G − B) ÷ Δ mod 6), green →60 × ((B − R) ÷ Δ + 2), blue →60 × ((R − G) ÷ Δ + 4).
HSL limitations
HSL lightness is not perceptual: hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) even though both are "50% lightness". For palettes where every step should look evenly spaced across hues, use OKLCH — the Color Converter outputs it. Always confirm text contrast rather than trusting the lightness number.
Frequently Asked Questions
What does 50% lightness mean in HSL?
At 50% lightness a color is at its most vivid for the given saturation. Lower values mix in black (shades) and higher values mix in white (tints), reaching pure black at 0% and pure white at 100% regardless of hue.
Why is the hue 0 for grey colors?
When red, green and blue are equal there is no dominant direction on the color wheel, so hue is undefined. By convention it is reported as 0, and saturation is 0%. Changing the hue of a grey has no visible effect.
Does converting RGB to HSL lose precision?
The math is exact, but HSL is usually written with whole numbers. Rounding can shift a channel by one step when converting back. Switch to one decimal place if you need an exact round trip, or check with the HSL to RGB Converter.
Is HSL the same as HSB or HSV?
No. Photoshop and Figma color pickers use HSB/HSV, where 100% brightness is the pure color, not white. The hue is the same, but saturation and brightness values differ from HSL’s saturation and lightness, so numbers cannot be copied between them directly.