RGB to HSL Converter

How to use the rgb to hsl converter

1. Enter the red, green and blue channel values between 0 and 255.
2. The tool immediately converts the rgb color to hsl notation.
3. Copy the hsl() string directly into your CSS or design software.
4. Use the individual hue, saturation and lightness rows if you need to adjust one component at a time.

How the RGB to HSL conversion works

The rgb to hsl algorithm normalizes each channel to a fraction between 0 and 1 by dividing by 255. It then finds the maximum and minimum of those three fractions. Lightness is simply the average of the max and min. Saturation depends on lightness: when lightness is 0 or 1 the color is pure black or white and saturation is zero; otherwise saturation equals the difference between max and min divided by a factor based on lightness. Hue is determined by which channel is the largest, using a formula that maps the result to a circle of 360 degrees.

For example, take the steel blue color with R=70, G=130, B=180. Normalized values are r=0.2745, g=0.5098, b=0.7059. The max is 0.7059 (blue) and the min is 0.2745 (red). Lightness = (0.7059 + 0.2745) / 2 = 0.4902, or about 49%. The delta is 0.4314. Since lightness is below 0.5, saturation = 0.4314 / (0.7059 + 0.2745) = 0.4402, or 44%. Because blue is the max channel, hue = 60 x (((0.2745 - 0.5098) / 0.4314) + 4) = 207.3 degrees, rounded to 207.

Common RGB colors in HSL

This table lists several standard colors with their RGB inputs and the resulting HSL output. You can use these as quick references when working with CSS.

Why designers use HSL over RGB

RGB describes a color as a mixture of red, green and blue light, which matches how screens emit color but does not match how people think about color. HSL separates the concept into hue (the position on the color wheel), saturation (how vivid the color is) and lightness (how dark or bright it appears). This separation makes it far easier to build palettes. If you want a lighter version of a brand color, you keep the hue and saturation fixed and raise the lightness value. In RGB you would have to guess new values for all three channels simultaneously.

CSS has supported the hsl() function for many years, and modern browsers also support space-separated syntax without commas. When you need to convert back from HSL to RGB, you can use the hsl to rgb tool. For conversions starting from a hex code, see hex to hsl.

Edge cases and rounding

Achromatic colors (grays, black and white) occur when the red, green and blue channels are all equal. In these cases the delta between max and min is zero, so hue is mathematically undefined. By convention the hue is set to 0 and saturation to 0%. The lightness correctly reflects the gray level.

Rounding is another consideration. The exact HSL values for many RGB inputs are irrational or repeating decimals. This converter rounds hue to the nearest integer degree and saturation and lightness to the nearest whole percent, matching common CSS practice. If you need more precision, the individual rows show the rounded numbers while the underlying calculation uses full floating-point accuracy before rounding. Note that converting an RGB color to HSL and back to RGB via hsl to rgb may shift the result by one unit per channel due to this rounding.

Related color conversions

This page handles the specific task of converting an rgb color to hsl. Other formats require different tools. If you start with a six-digit hex code, use hex to hsl. To go the other direction, hsl to hex produces a hash-prefixed string ready for CSS. For projects that still rely on RGB hex strings, rgb to hex and hex to rgb cover that pair. Print workflows often need CMYK equivalents, available through cmyk to rgb and related converters.

Worked examples