HEX to HSL Converter

How to use the hex 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

A hex colour is just RGB written in base 16 — #ff8800 is red 255, green 136, blue 0. Converting to HSL does not change the colour, only how it is addressed.

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.

Three-digit hex is shorthand where each digit is doubled, so #f80 and #ff8800 are the same colour. Eight digits add an alpha channel at the end.

Common uses

• Taking a brand hex and generating lighter and darker variants.
• Understanding what hue a hex value actually is.
• Converting a palette into CSS hsl() notation.

Frequently asked questions

What does the third pair of hex digits mean?

Blue. The pairs are red, green and blue, each from 00 to ff — that is 0 to 255 in decimal.

Is #f80 the same as #ff8800?

Yes. Three-digit hex doubles each digit, so it is shorthand for exactly the same colour.

What about eight-digit hex?

The last pair is alpha, from 00 fully transparent to ff fully opaque. It is supported in all current browsers.