HSL/HSLA

HSL colors

Hue Saturation Lightness (HSL) colors are a more recent addition to CSS.

Similarly to RGB, we also list three values. The first is the hue (a value from 0 to 360), then our saturation (a percentage from 0% to 100%), and then our lightness (a percentage from 0% to 100%). Examples are provided in the code snippet below:

color: hsl(0, 0%, 0%);       /* black */
color: hsl(0, 0%, 100%);     /* white */
color: hsl(0, 100%, 50%);    /* red */
color: hsl(120, 100%, 25%);  /* green */
color: hsl(240, 100%, 50%);  /* blue */
color: hsl(60, 100%, 50%);   /* yellow */

HSL colors are opaque by default. To add opacity, use the hsla() functional notation to add a fourth value ranging from 0 (completely transparent) to 1 (completely opaque).

color: hsla(180, 100%, 50%, .5);

Example