RGB to HSL Converter

RGB describes a color by mixing red, green and blue light, each from 0 to 255. HSL describes the same color by its hue (the color), saturation (how vivid it is) and lightness (how bright it is). Both can represent the same colors; HSL is just a more intuitive way to think about them.

With HSL you can adjust one property at a time. Want a darker shade of the same color? Lower the lightness. Want it less vivid? Lower the saturation. In RGB you would have to change all three channels together to get the same effect, which is much harder to reason about.

Hue is an angle from 0 to 360 degrees on the color wheel, where 0 is red, 120 is green and 240 is blue. Saturation runs from 0% (gray) to 100% (full color). Lightness runs from 0% (black) through 50% (the pure color) to 100% (white).

The hue, saturation and lightness are rounded to whole numbers so the output is clean and easy to paste into CSS. For example, rgb(59, 130, 246) becomes hsl(217, 91%, 60%). Rounding can cause a tiny shift, but it is not visible to the eye.

You can paste a full CSS value like rgb(59, 130, 246) or just the three numbers as 59, 130, 246. Each channel must be between 0 and 255, and values outside that range are flagged as invalid.

No. The conversion runs entirely in your browser, so the colors you enter never leave your device.