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.

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.
produces the following colour
produces the following colour
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.
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.
0 Comments
Good day precious one, We love you more than anything.