CSS Tutorial Lesson 12: HSL and HSLA Colour Codes

[Lesson 11]<<[Contents]>>[Lesson 13]

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:

hue2

Hue in CSS is expressed in terms of angle, the values range from 0 to 360 degrees. 0 or 360 is red, 120 is green and 240 is blue.

Saturation means the amount of grey in a colour. It uses percentage to denote the amount of grey, where 0% means a shade of grey and 100% means full colour.

Lightness(or brightness) is the amount of  white or black in a colour. It 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

<div style=”background-color: hsl(120,30%,60%); width: 100px; height: 50px; margin-left: 50px;”></div>

produces the following colour

<div style=”background-color: hsl(270,100%,20%); width: 100px; height: 50px; margin-left: 50px;”></div>

produces the following colour

12.2 HSLA

HSLA adds another value known as Alpha which represents 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 opaque and 0 means fully transparent.

Example 12.2

<div style=”background-color: hsla(180, 100%, 50%,1); position: static; margin-left: 100px; margin-top: 100px; width: 150px; height: 150px; z-index: 2;”></div>
<div style=”background-color: hsla(240, 100%, 50%,0.5); position: static; margin-left: 150px; margin-top: -70px; width: 150px; height: 150px; z-index: 2;”></div>
<div style=”background-color: hsla(180, 100%, 50%,1); position: static; margin-left: 400px; margin-top: -230px; width: 150px; height: 150px; z-index: 2;”></div>
<div style=”background-color: hsla(240, 100%, 50%,1); position: static; margin-left: 450px; margin-top: -70px; width: 150px; height: 150px; z-index: 2;”></div>

Prodcues the following boxes, the blue box at the top has an alpha value of 0.5 which means 50% transparent while the blue box at the bottom has an alpha value of 1 which means it is fully opaque.

 

 [Lesson 11]<<[Contents]>>[Lesson 13]