RGB to HSL Converter

Type red, green and blue into the R, G and B boxes, each from 0 to 255. The HSL result and the swatch update as you type, and the HEX box is rewritten to match. There is no box for pasting a whole rgb(...) string, so split it into its three numbers first.

• Values outside the range are clamped: 300 becomes 255 and −5 becomes 0.
• Decimals are rounded, so 12.6 becomes 13.
• An empty box counts as 0.
• Percentages like 50% aren't accepted. Multiply by 2.55 first, so 50% is 127.5, which rounds to 128.

Here is how the converter gets hsl(9, 100%, 64%) from that orange-red:

1. Divide each channel by 255: R = 1.000, G = 0.388, B = 0.278.
2. Find the largest and smallest: max = 1.000, min = 0.278.
3. Lightness is their average: (1.000 + 0.278) ÷ 2 = 0.639, so 64%.
4. Saturation is the spread divided by 1 − |2L − 1|: 0.722 ÷ 0.722 = 1.000, so 100%.
5. Red is the largest channel, so hue is 60 × ((G − B) ÷ spread) = 60 × (0.110 ÷ 0.722) = 9.13°, rounded to 9.

When green is the largest, the hue formula uses (B − R) ÷ spread + 2, and when blue is, (R − G) ÷ spread + 4, each times 60. A negative hue has 360 added.

Because all three values are rounded to whole numbers, nearby RGB colours can share one HSL value. If you need an exact match later, keep the RGB numbers alongside the HSL.

RGB says how much of each light to mix, which is how screens work but not how people describe colour. HSL separates the hue from how vivid and how light it is. That makes it easier to build a set of related colours, for example the same hue at 30%, 50% and 70% lightness for backgrounds, buttons and text, or to mute a colour by lowering only the saturation.