CSS3

• Home / CSS3 Previews / HSLA Colors

HSLA Colors

As RGBA is to RGB, HSLA is to HSL; that is, it allows a fourth value, which sets the Opacity (via the Alpha channel) of the element.

At the time of writing, only Safari 3 and the Firefox 3 beta support the HSLA style of color declaration.

An example:

The top row (if you are one of the few brave souls who have downloaded the Firefox 3 beta you can see it) uses the HSLA declaration;

<div style="background-color: hsla(0,100%,50%,0.2);"></div>
<div style="background-color: hsla(0,100%,50%,0.4);"></div>
<div style="background-color: hsla(0,100%,50%,0.6);"></div>
<div style="background-color: hsla(0,100%,50%,0.8);"></div>
<div style="background-color: hsla(0,100%,50%,1);"></div>

The second row approximates the output using RGB.

<div style="background-color: rgb(243,191,189);"></div>
<div style="background-color: rgb(246,143,142);"></div>
<div style="background-color: rgb(249,95,94);"></div>
<div style="background-color: rgb(252,47,47);"></div>
<div style="background-color: rgb(255,0,0);"></div>

A fuller explanation of HSLA colors can be found in the W3C CSS3 Color Candidate Recommendation.