HSL Simplified

22-03-2021

---

What is HSL?

The HSL color model uses the color wheel, making it far more intuitive to use than RGB, HEX and the like. You can guess at the colors you want, and then tweak them as you see fit. It's also easier to pair colors of the same light-, darkness and saturation, as you can simply tweak the hue.

HSL is simply used like so in CSS

background-color: hsl(H,S,L);

H = Hue
S = Saturation
L = Lightness

Hue

Hue is represented as an angle of the color wheel (You'll know this as the rainbow represented in a circle). The angle is measured in degrees(0-360). Your reds are on either end of the spectrum(0 and 360) with all colors in between, so green = 120, blue = 240 and so on.

Saturation

Saturation is represented as a percentage. 100% is full saturation, and 0% is simply a shade of grey devoid of color.

Lightness

Lightness describes how much light you want to give the color. 0% means no light at all(black) while 100% is full lightness(white).

Alpha

You can expand HSL to also include the alpha, thus making the color more or less transparent. Alpha ranges from 0-1, where "0" is 100% transparent and "1" is 100% visible. You can add the alpha by writing the following(Notice the "A" for Alpha: HSLA):

background-color: hsla(H, S, L, A);

background-color: hsla(0, 100%, 50%, 0.5);

Or the modern syntax, background-color: hsla(H S L / A);

background-color: hsla(0 100% 50% / 0.5);

Try it

Try it with this HSLA editor:

Browser support

Unless you're still, for some god forsaken reason, supporting IE8 or prior, you'll have no problems using HSL across the board!