RGB to HSL Converter
Convert RGB values to HSL with formula explanation, live preview, and CSS output.
g=83/255 = 0.33
b=58/255 = 0.23
L = (max+min)/2 = 57%
hsl(9, 79%, 57%)9°79%57%#E8533A--color: hsl(9, 79%, 57%);RGB to HSL conversion helps when building CSS theming systems. HSL values let you adjust lightness and saturation independently, making it simple to generate hover states, dark mode variants, and shade scales programmatically.
RGB to HSL Converter — Translate Screen Colors to Human-Readable Format
RGB values are how computers define color — three integers from 0 to 255 representing the intensity of red, green, and blue light. HSL reformats this into dimensions humans reason about more naturally: what color (hue), how vivid (saturation), and how light or dark (lightness). Converting RGB to HSL is essential when you need to build color scales, create accessible variants, or write dynamic CSS that adjusts colors based on user preferences or component state.
The RGB to HSL Conversion Formula
To convert RGB to HSL, first normalize each RGB value to the 0–1 range by dividing by 255. Find the minimum and maximum of the three values. The range (max minus min) determines saturation. Lightness is the average of max and min. Hue is calculated from which channel is dominant — red, green, or blue — and the relative distance between channels. Our converter handles this math instantly, displaying the result alongside your live color preview.
CSS Applications for HSL Colors
In CSS, hsl(220, 80%, 55%) is a valid color value anywhere a color is accepted. The CSS Color Level 4 specification also supports the space-separated syntax: hsl(220 80% 55%), and relative color syntax: hsl(from var(--primary) h s calc(l - 10%)) — enabling you to compute lighter and darker variants directly in CSS without JavaScript. This makes HSL the ideal format for modern CSS-first design systems and component libraries.
Is RGB to HSL conversion lossless?
Yes. Converting RGB to HSL and back to RGB produces the same values (within floating-point rounding). No color information is lost in the conversion.
What is the HSL equivalent of rgb(255, 0, 0)?
rgb(255, 0, 0) (pure red) is hsl(0, 100%, 50%) — hue 0 degrees, fully saturated, mid lightness.