CalConverters

RGB to HSL Converter

Type or paste RGB values, or rgb(255, 99, 71), and get the matching hsl() value instantly, plus the same colour in hex, HSV and CMYK if you need it.

Files never leave your device
hslhsl(9, 100%, 64%)
hex#ff6347
rgbrgb(255, 99, 71)
hsvhsv(9, 72%, 100%)
cmykcmyk(0%, 61%, 72%, 0%)

Starting from RGB instead of hex

RGB is usually where a colour arrives from in code — a canvas API, a colour picker's channel sliders, an image's pixel data — so converting RGB straight to HSL, without a hex string in between, is the more common path in practice. The maths is the same either way; only the input format changes.

Working the numbers on rgb(142, 68, 173)

Take the three channels: 142 (red), 68 (green), 173 (blue). The largest is blue at 173, the smallest is green at 68. Lightness is their average: (173 + 68) / 2 = 120.5, and as a share of 255 that's about 47% — the l in hsl(282, 44%, 47%).

Saturation compares the gap between the largest and smallest channel (173 − 68 = 105) against how far the lightness sits from the middle of the range; working that through gives roughly 44%, a moderately saturated colour rather than a vivid one. Hue looks at blue being the largest channel and where red and green fall relative to the 105-wide gap, landing at 282 degrees — solidly in the purple band between blue (240°) and magenta (300°).

Tip: The channel that's largest tells you which third of the colour wheel the hue falls in before you even finish the calculation: red largest means the hue is near 0°, green largest means near 120°, blue largest means near 240°.

A dark example: rgb(0, 31, 63)

Low channel values across the board don't need a special case — the same steps apply. The largest channel is blue (63), the smallest is red (0), so lightness is (63 + 0) / 2 = 31.5, about 12% of 255. That low lightness is what makes the colour read as a near-black navy rather than a mid-tone blue, even though saturation comes out at a full 100% — full saturation just means no grey is mixed in, it says nothing about how light or dark the result looks.

Tip: A colour can be 100% saturated and still look almost black. If a "fully saturated" colour in your palette looks dull, check lightness before assuming saturation is the problem — a low l value is usually the actual cause.

When two channels tie for the maximum

rgb(0, 200, 200) has green and blue tied at 200, both above red's 0, which puts the colour exactly on the boundary between the green and blue thirds of the wheel: hsl(180, 100%, 39%), a cyan. rgb(200, 0, 200), red and blue tied above green, lands at hsl(300, 100%, 39%), a magenta. Neither case needs special handling — the same largest-channel rule picks out 180 and 300 without any averaging, because a tie at the maximum still leaves one channel clearly at the minimum, which is all the formula needs to place the hue precisely.

Adjusting a colour: RGB versus HSL

TaskIn RGBIn HSL
Make it 20% lighterRecompute all three channels toward 255Add roughly 20 to the l value
Make it less vividBlend all three channels toward their averageLower the s value
Pick a related colourNot directly possibleAdd or subtract degrees from h
Store it exactlyThree integers, 0–255 eachThree numbers on three different scales

RGB is compact and exact, which is why formats and file headers store colour that way. HSL trades a little of that compactness for channels that map onto the questions a person actually asks about a colour — how light, how vivid, which hue — which is why it's the format most style systems expose as variables for exactly this reason: a design token like --brand-l: 47% can be tuned on its own without anyone recomputing red, green and blue by hand.

Frequently asked questions

What's the formula for turning RGB into HSL?
Lightness is the average of the largest and smallest channel. Saturation compares the gap between the largest and smallest channel against how central that lightness is. Hue looks at which channel is largest, then how the other two lean relative to the gap between the largest and smallest, converted to a position on a 360-degree wheel.
Do I need to convert to hex first to get HSL?
No — hex and HSL are both derived from RGB independently. This tool takes RGB straight to HSL without a hex step in between, and typing RGB numbers directly is usually faster than converting to hex by hand first.
Why is rgb(0, 31, 63) reported as only 12% lightness?
Lightness is the average of the highest and lowest channel, scaled to a percentage. Here the highest channel is blue at 63 and the lowest is red at 0; their average is 31.5, which is about 12% of 255 — correctly dark, since every channel is a small number.
Can saturation be 100% for a colour that isn't pure red, green or blue?
Yes. rgb(142, 68, 173) is a muted purple, not a primary colour, and still reaches roughly 44% saturation, well below 100% — but a colour like rgb(0, 31, 63) reaches exactly 100%, because saturation depends on the relative spread between channels at that lightness, not on which primary is involved.
What happens to hue when two channels tie for the maximum?
The colour sits exactly between two hue bands — cyan (180°) between green and blue, for instance, when green and blue are equal and both exceed red. The formula picks a consistent side without ambiguity, so the hue value is still exact, not averaged or approximated.
Is the hue in HSL the same number a colour picker's hue slider uses?
Yes, this is the standard CSS and design-tool definition: 0–360 degrees around a fixed wheel, red at 0, green at 120, blue at 240. A colour picker's hue slider and this tool's hue output describe the same wheel and should always agree.