HSLA is defined in the CSS3 Color Module, and is another way that designers and developers can specify the color of something via CSS. I grew up understanding color defined by light, varying the amounts of red, green and blue result in different colors – yellow and blue make green, or if you’re in the USA, yellow and blue mean your ziploc bag is sealed. 
It took me a little while to wrap my head around the HSL color model because it’s quite different from the RGB model. Instead of adding different amounts of each of those, the color is defined by three properties:
- Hue [0 to 360] – defines the color according to a position or degree on the color wheel. The color wheel is split into effectively three areas, with 0° being pure red, 120° being pure green and 240° being pure blue. Therefore, if you wanted purple, it’d be halfway between red (0 or 360) and blue (240), or 300°
![Wheel]( "Wheel")
- Saturation [0-100%] – defines the intensity of the color, zero, there is no instensity to the color and it shows as gray, and as the number gets bigger, the more intense the color.
- Lightness [0-100%] – defines how bright, or dark the color is. 50% is the true color, the larger the number, the closer you get to white, and the smaller the number, the closer you get to black.
- Alpha [0-1] – is the alpha transparency, and tells the browser how transparent or opaque the color should be. The closer to 1, the more opaque, and the closer to 0, the more transparent.
Let’s See It In Action!
In the samples below, if your browser supports HSLA, you’ll see two color swatches, the first which sets the table cell background color via the HSLA property, and the second, an image of the same. If your browser doesn’t support HSLA, you’ll only see the image. Each color box is represented by the code sample below, in order from left to right.
| Hue | ||
 |
||
background-color: hsla(0, 100%, 50%, 1.0); background-color: hsla(120, 100%, 50%, 1.0); background-color: hsla(240, 100%, 50%, 1.0); The value for hue is specified as a number between 0 and 359, but you can go above 359, which just cycles around the circle again. For example 480 represents green, because 480 – 360 = 120. |
||
| Saturation | ||||
 |
||||
background-color: hsla(300, 0%, 50%, 1.0); background-color: hsla(300, 25%, 50%, 1.0); background-color: hsla(300, 50%, 50%, 1.0); background-color: hsla(300, 75%, 50%, 1.0); background-color: hsla(300, 100%, 50%, 1.0); The saturation needs to be a percentage between 0% and 100% and defines the intensity of the color. At 0%, with no intensity, we end up with gray. |
||||
| Lightness | ||||
 |
||||
background-color: hsla(300, 100%, 0%, 1.0); background-color: hsla(300, 100%, 25%, 1.0); background-color: hsla(300, 100%, 50%, 1.0); background-color: hsla(300, 100%, 75%, 1.0); background-color: hsla(300, 100%, 100%, 1.0); Like the saturation attribute, the lightness attribute is a percentage between 0% and 100%. Changing the value, allows you to easily create black or white, but you can also get very subtle shades of a color, for example by setting the lightness to 98%, will result in an almost white, with a hint of color in it. |
||||
| Alpha | ||||
 |
||||
background-color: hsla(300, 100%, 50%, 0.0); background-color: hsla(300, 100%, 50%, 0.25); background-color: hsla(300, 100%, 50%, 0.50); background-color: hsla(300, 100%, 50%, 0.75); background-color: hsla(300, 100%, 50%, 1.0); Alpha transparency makes the object more or less transparent. This is very useful if you want to overlay something on top of another object, but still want to be able to see the object underneath. Like other places where you can specify the alpha transparency, the value is between 0 and 1, where 0 is completely transparent (effectively invisible), and 1 is completely opaque and you cannot see through it at all. |
||||
| Black, Grays and White | ||||
 |
||||
background-color: hsla(0, 0%, 0%, 1.0); background-color: hsla(0, 0%, 25%, 1.0); background-color: hsla(0, 0%, 50%, 1.0); background-color: hsla(0, 0%, 75%, 1.0); background-color: hsla(0, 0%, 100%, 1.0); When defining black, grays and white, the hue doesn’t matter at all. The needs to be set at 0, to indicate that there should be no indication of the color showing through. Then, by changing the lightness you can adjust the shade of black, with 0% being black, and 100% being pure white. |
||||
Using It Today
If you want to use the HSLA color model today, but still have to support browsers that don’t support the HSLA color model, the fact that CSS styles cascade (crazy I know), allow you to do support both models.
div {
background-color: #ff00ff;
background-color: hsla(300, 100%, 50%, 1);
}