Lesson 12: HSL and HSLA Color Codes

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

12.1 HSL

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

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 gray in a color. It uses percentage to denote the amount of gray, where 0% means a shade of gray and 100% means full color. Lightness(or brightness) is the amount of white or black in a color. 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

The following CSS produces the color below:

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

This CSS produces the color below:

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

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>

The above CSS 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.