RGB to HSL

Steps to convert RGB to HSL

1. Paste your rgb() value, or the three 0 to 255 numbers, into the field.
2. Read the hsl() result, shown as hue, saturation and lightness.
3. Use the wheel and bars to see where the color sits, then click to copy.
4. Carry on editing in the HSL picker if you want to adjust it.

Meaning of the HSL values

RGB describes a color as three light channels; HSL re-expresses the same color as three numbers you can reason about. For rgb(30, 144, 255) the result is hsl(210, 100%, 56%):

How RGB to HSL conversion works

The three channels are first scaled to 0 to 1, then recombined. Hue comes from which channel is largest and by how much, saturation from the gap between the highest and lowest channel, and lightness from their average. It is the same color throughout, just measured a different way, so the trip is reversible with no loss beyond rounding.

Why HSL is easier to work with than RGB

Nudging a color in RGB means juggling three numbers at once, and that is exactly the friction HSL removes. To darken a color you lower one value, lightness, instead of guessing how to drop red, green and blue together. For building UI states and tints by hand, reasoning in hue, saturation and lightness is simply more intuitive than thinking in light channels.

What RGB to HSL is used for

• Turning a color sampled in RGB into a form you can lighten or darken cleanly.
• Building hover and active states by shifting only the lightness.
• Muting or boosting a color through its saturation without touching the hue.
• Generating a matching set from one color with the Scheme Generator.