HSL/HSLA
Learn about HSL/HSLA colors.
We'll cover the following
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
Get hands-on with 1400+ tech skills courses.