RGB to HSL Converter

How to use the rgb to hsl converter

1. Enter or pick your colour.
2. Read every notation below, updated as you type.
3. Copy whichever one you need.

About this tool

Hue is an angle on the colour wheel: 0° red, 120° green, 240° blue. Saturation is how much colour there is, and lightness runs from black at 0% through the pure hue at 50% to white at 100%. That is what makes HSL worth using — to make a shade darker you change one number, where in hex you would be guessing at three.

The conversion is exact in one direction and lossy in the other only because of rounding: HSL is normally written with whole-number percentages, which can shift a channel by a point or two on the way back. If you need an exact value, keep the hex.

Both notations describe the same sRGB colour — HSL is not a different colour space, just a more human way of addressing the same one.

Common uses

• Making a colour lighter or darker by one number instead of three.
• Building a palette of tints from one brand hue.
• Reading a colour from a design tool into CSS.

Frequently asked questions

Is HSL better than RGB or hex?

Not better, just easier to reason about. Adjusting lightness or saturation is one number in HSL, where in hex you would be adjusting three at once.

Why does converting back give a slightly different RGB?

HSL is normally written with whole-number percentages. Rounding those can move a channel by up to about 2 out of 255, which is invisible but not identical.

Do browsers support hsl() directly?

Yes, everywhere. You can write hsl() in CSS without converting to hex at all.