CSS Tutorial Lesson 12: HSL and HSLA Colour Codes

We have learned how to use the opacity property and RGBA codes to specify colours in CSS. Now we shall learn the newest ways to specify colours in CSS, i.e HSL and HSLA colour codes.

12.1 HSL

HSL stands for Hue, Saturation and Lightness.Hue means a rainbow ring of colours, as shown below:

Hue in CSS is expressed in terms of angle, the values range from 0 to 360 degress. 0 or 360 is red, 120 is green and 240 is blue.
Saturation means the amount of gray in a colour. It uses percentage to denote the amount of gray, where 0% means a shade of gray and 100% means full colour.
Lightness(or brightness) is the amount of  white or black in a colour. Its also uses percentage to denote the amount of lightness, 0% means black and 100% means white.
The syntax of HSL in CSS is hsl(h, s%,l%) where h represent hue, s% represent saturation and l% represent lightness.

Example 12.1

produces the following colour

produces the following colour

12.2 HSLA

HSLA adds another value known as Alpha which represent transparency. The syntax of HSLA is hsla(h,s%,l%,a) where a has values range from 0 to 1. The value of 1 means fully opague and 0 means fully transparent.

Example 12.2

Prodcues the following boxes, the blue box on the left has an alpha value of 0.5 which means 50% transparent while the blue box on the right has an alpha value of 1 which means it is fully opague.