Joe Astuccio

Joe Astuccio

Specifying Web Colors Using HSL

04/22/20191 Min Read — In Design, CSS

HSL - Hue, Saturation, and Lightness

Specifying colors for the web with HSL has good modern browser support (of course it doesn't work with IE 8 or earlier 🙄)

Hue

the color. It takes a value between 0deg and 360deg.

Saturation

How much color. 0% (gray) to 100% (full saturation).

Lightness

0%(black) to 100%(white) 50% is the mid point and the most colorful.

example: color: hsl(280deg, 0%, 50%);

If you need transparency use HSLa hsla(280deg, 0%, 50%, 0.8)

At 0% saturation, hue has no effect. See the video below


Human Friendly Colours using HSL on Medium also has some interesting tips