RGB to HSL Color Converter

The hue (H) value shows your color's position on the color wheel, saturation (S) shows how vivid or muted it is, and lightness (L) shows how close it is to black or white. Together, these three values can be used directly in CSS as hsl(H, S%, L%).

R, G, and B are first scaled to a 0-1 range. Lightness (L) is the average of the highest and lowest channel. Saturation (S) is the difference between channels relative to lightness, and hue (H) is calculated across a 0-360 degree range based on which channel is dominant.

• R, G, and B values are divided by 255 to scale them to a 0-1 range.
• The largest (max) and smallest (min) of the scaled values are found.
• Lightness (L) is calculated as the average of the max and min values.
• Saturation (S) is found by normalizing the max-min difference relative to lightness.
• Hue (H) is calculated across a 0-360 degree range based on which channel (R, G, or B) is dominant.

R=52, G=152, B=219 (a vivid blue) converts to approximately H=204 degrees, S=70%, L=53%.

• Enter R, G, and B as whole numbers between 0 and 255; values outside that range are not a valid color.
• Hue (H) is a position on a 0-360 degree color wheel: 0 means red, 120 means green, 240 means blue.
• Saturation and lightness are read as percentages; 0% saturation is a shade of gray, and 100% lightness is white.

The RGB (Red, Green, Blue) model mirrors exactly how screens produce color by emitting light: each channel takes an intensity value from 0 to 255, and combining the three channels produces millions of distinct colors. However, this model is not intuitive when you want to make a color 'lighter' or 'more vivid,' since you would need to adjust all three channels at once.

The HSL (Hue, Saturation, Lightness) model instead describes colors the way the human eye perceives them: hue identifies what the color is (red, green, purple), saturation shows how vivid it is, and lightness shows how light or dark it is. This is why designers and developers often prefer HSL when building color palettes.

This tool scales your RGB input to a 0-1 range, then finds the highest and lowest channel values to calculate lightness and saturation. It then determines which channel is dominant to find the hue's exact position on the color wheel.

The biggest advantage of the HSL format is that it can be used directly in CSS as hsl(hue, saturation%, lightness%). For example, to create a darker variant of a brand's primary color, you only need to lower the lightness value — in RGB, you would need to recalculate all three channels separately.

Color conversions like this are common in web design, logo work, data visualization, and UI theming systems. Converting RGB to HSL is a practical starting point for developers who want to build light/dark theme variants or a consistent color palette.