RGB to HSL Color Converter
Turn red, green, and blue channel values into the HSL color model, giving you hue in degrees plus saturation and lightness as percentages.
Saturation 100% · Lightness 63.9%
- 1
Normalize RGB
R ÷ 255, G ÷ 255, B ÷ 255 = 1, 0.3882, 0.2784 - 2
Lightness L
(1 + 0.2784) ÷ 2 = 63.9% - 3
Chroma d
1 − 0.2784 = 0.7216 - 4
Saturation S
0.7216 ÷ (1 − |2 × 0.6392 − 1|) = 100%Zero for grey; 1 for a fully saturated colour. - 5
Hue H
60 × (((0.3882 − 0.2784) ÷ 0.7216) mod 6) = 9.1Red is the dominant channel.
How does this calculator work?
Divide each RGB channel by 255, then take the max and min. Lightness is their average, saturation is the chroma divided by (1 − |2L − 1|), and hue comes from the dominant channel. The result is HSL: hue in degrees plus saturation and lightness as percentages.
Formula
How this is calculated
Enter the three RGB channels (R, G, B), each from 0 to 255. Values are clamped into that range and divided by 255 so each channel becomes a fraction between 0 and 1. The largest of the three fractions is max and the smallest is min.
Lightness is the midpoint of the extremes, L = (max + min) / 2. The chroma d = max − min drives saturation: S = d / (1 − |2L − 1|), which is 0 for any grey where max equals min. Hue is found from whichever channel is the maximum — red gives 60·(((g−b)/d) mod 6), green gives 60·((b−r)/d + 2), and blue gives 60·((r−g)/d + 4); a negative result is wrapped by adding 360.
Outputs are H in degrees (0–360°), and S and L scaled to percentages (×100). For pure greys (R = G = B) hue and saturation are both 0 and only lightness varies. The conversion is exact and lossless aside from the percentage rounding shown.
Frequently asked questions
When R, G and B are identical the color is a shade of grey, so chroma (max − min) is zero. With no color content there is no hue or saturation, only lightness changes from black to white.
Hue is reported in degrees from 0 to 360°, while saturation and lightness are percentages from 0% to 100%. This matches the CSS hsl() notation, so you can paste the values straight into stylesheets.
No. HSL lightness is the average of the lightest and darkest channels, so pure colors sit at 50% lightness. HSV value uses only the maximum channel, so the two models report different numbers for the same color.
Also known as
TG we-Calculate Editorial Team. (2026). RGB to HSL Color Converter [Online calculator]. TG we-Calculate. https://we-calculate.com/calculator/rgb-to-hsl-converter
TG we-Calculate Editorial Team. "RGB to HSL Color Converter." TG we-Calculate. 2026. https://we-calculate.com/calculator/rgb-to-hsl-converter.
TG we-Calculate Editorial Team, "RGB to HSL Color Converter," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/calculator/rgb-to-hsl-converter
@misc{wecalculate_rgb_to_hsl_converter, title = {RGB to HSL Color Converter}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/calculator/rgb-to-hsl-converter}}, year = {2026}, note = {TG we-Calculate} }
Did this calculator help you?