RGB to HSL

What this tool is used for

• Converting RGB channels into a model where hue can be adjusted directly.
• Understanding a colour's saturation without guessing from channels.
• Producing HSL for a theme variable a stylesheet will vary.
• Comparing two RGB colours by hue rather than by channel.
• Building a tint scale from a picked RGB value.

Frequently Asked Questions

How is hue calculated?

From which channel is the largest. If red is the maximum the hue lands in the red sector, and the exact angle comes from how far green and blue sit apart, scaled to 60° per sector — six sectors, 360°. When all three channels are equal the colour is grey and hue is undefined, reported as 0.

What are saturation and lightness exactly?

Lightness is the midpoint of the brightest and darkest channel, (max + min) ÷ 2. Saturation is their spread divided by how much room is left at that lightness, which is why a colour at 95% lightness can never be very saturated — there is nowhere for the channels to spread.

Does the conversion round-trip exactly?

Not always. HSL is reported in whole degrees and whole percentages, and 16.7 million sRGB colours do not map onto that grid, so converting back can move a channel by one. Keep the hex value as the source of truth and use HSL for adjusting.

Why use HSL at all?

Because it makes the edits people actually want trivial: a lighter shade is the same hue and saturation with lightness raised, and a muted variant is saturation lowered. Doing either in RGB means changing three numbers and hoping.

Which CSS syntax should I write?

Modern CSS accepts `hsl(210 100% 50%)` with spaces and no commas, and `hsl(210 100% 50% / 50%)` for alpha — the separate `hsla()` function is now just an alias. The comma form still works everywhere, so either is safe.

How is hue calculated from RGB?

From which channel is largest and by how much it leads the smallest, mapped onto a 360-degree wheel in 60-degree sectors. When all three are equal there is no largest channel, which is why grey has no meaningful hue.

Common errors and gotchas

• Treating HSL lightness as perceptual brightness, which it is not.
• Assuming a grey has a meaningful hue, when saturation zero makes hue arbitrary.
• Rounding hue heavily on a near-grey colour, which then shifts visibly when saturation is raised.
• Losing alpha in the conversion, since the three-part forms have nowhere to carry it.
• Building an even-looking scale by stepping lightness, which is uneven perceptually.