RGB to HSL Converter
RGB describes a color by how much red, green, and blue light it mixes, each from 0 to 255. HSL re-expresses the same color as hue (its position on the color wheel), saturation (how vivid), and lightness (how light or dark), which is far more intuitive for adjusting colors. Enter red, green, and blue values and this converter returns the hue in degrees, the saturation and lightness as percentages, and the hex code. The conversion uses the exact formula from the W3C CSS Color specification.
RGB to HSL formula
r, g, b normalized = R/255, G/255, B/255
max = largest channel; min = smallest channel
Lightness L = (max + min) / 2
If max = min: S = 0, H = 0 (gray)
Else S = (max - min) / (1 - |2L - 1|)
H derived from which channel is max, scaled to 0 to 360
Saturation and lightness are reported as percentages. A gray (max equals min) has zero saturation and an undefined hue, reported as 0.
Color model context
- Hue runs 0 to 360 degrees: red at 0, green at 120, blue at 240.
- Pure red (255, 0, 0) is HSL 0, 100 percent, 50 percent.
- White is any RGB triple where all channels equal: lightness 100 percent, saturation 0.
- HSL is supported directly in CSS as hsl() color values.
- HSL differs from HSB or HSV in how the third value is defined.
RGB to HSL converter: frequently asked questions
How do you convert RGB to HSL?
Divide each RGB channel by 255 to get values from 0 to 1. Lightness is the average of the largest and smallest of the three. Saturation depends on the spread between them and the lightness. Hue is derived from which channel is largest and the differences between channels, scaled to 0 to 360 degrees. This is the standard formula in the CSS Color specification.
What do hue, saturation, and lightness mean?
Hue is the color's position on the color wheel in degrees: 0 is red, 120 is green, 240 is blue. Saturation is how vivid the color is, from 0 percent (gray) to 100 percent (full color). Lightness is how light or dark it is, from 0 percent (black) to 100 percent (white).
Why use HSL instead of RGB?
HSL maps more closely to how people describe color: pick a hue, then adjust vividness and brightness independently. That makes it easier to create lighter or darker variations of a color or to rotate the hue, which is awkward in RGB where all three channels change at once.
What is the lightness of pure red?
Pure red is RGB 255, 0, 0, which converts to HSL 0 degrees, 100 percent saturation, 50 percent lightness. The 50 percent lightness reflects that a fully saturated primary sits halfway between black and white in this model.
Is HSL the same as HSB or HSV?
No. HSL uses lightness, where 50 percent is the most vivid and 100 percent is white. HSB and HSV use brightness or value, where 100 percent value at full saturation is the most vivid color and there is no built-in white at the top. They share hue and saturation concepts but compute the third value differently.
Official sources
- W3C: CSS Color Module Level 3 (RGB and HSL color).
- International Commission on Illumination: CIE colorimetry reference.
Reviewed by the CalculatorHub team, edited by James Graham, 17 June 2026. See our methodology.