HSLA stands for Hue, Saturation and Lightness, alpha and is similar to HSL, only it allows the inclusion of an alpha channel. The alpha channel allows to create transparent colors, this is useful when you want a background of an element to be transparent, but not the children of the element.
Transparent colors have many other uses, but one of the main features, is that it avoids the problems caused by using the CSS opacity property.
HSLA takes four values, the first is the Hue, the second is the Saturation, the third is the Lightness, and the fourth is the Alpha. The Hue should be given in degrees, and the Saturation, the Lightness in percentages, and the Alpha in a numeric value between 0 and 1.
|Hue||Accepts a numeric value 0-360. Values beyond that will wrap, so a negative value of -60 will be the same as a value of 300.|
|Saturation||Takes a value from 0% to 100%. A value of 0% creates a gray shade.|
|Lightness||Takes a value from 0% to 100%. A 0% lightness is black, while a 100% lightness is white, and 50% is normal.|
|Alpha||Takes a value from 0 to 1. A value of 0.5 is equal to 50% transparent.|
The code used in the above example is shown below:
<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;"> <div style="position: absolute;z-index: 2;background: hsla(240, 100%, 50%, 0.5);width: 150px;height: 150px;top: 25px;left: 25px;"> </div> </div>