Colors in CSS3

Most modern browsers also support the new CSS3 methods for setting colors. Older browsers like IE6 don’t support rgba, hsl and hsla so you will need to specify a fallback color. If you don’t do this, you might get a problem with the legibility of your text.

RGBA

RGBA works the same way as RGB, but has an extra parameter for the alpha channel. The last parameter for rgba() should be a value between 0.0 (fully transparent) and 1.0 (fully opaque). The CSS Rule below sets the background to a 50% transparent black.

body {
    background: rgba(0, 0, 0, 0.5);
}

Implementing the fallback color for older browsers is easy. Set that color with a hexadecimal value first, right before the declaration with the rgba() color. Older browsers will ignore the second background property because they don’t understand rgba(). Newer browsers will overwrite the first color with the rgba() color. The CSS Rule below sets the background color to black for older browsers, people surfing with a more modern browser will see a transparent black background.

body {
    background: #000000;
    background: rgba(0, 0, 0, 0.5);
}

HSL

HSL stands for Hue, Saturation and Lightness. This is not the same as the HSB values you’ll find in the Photoshop color picker. HSB (often called HSV) is another color model and stands for Hue, Saturation and Brightness. Wikipedia has a good entry on HSL and HSV color models.

The hsl() method also takes three parameters, just like the rgb() method. The values for these parameters, however, are different. In RGB you would use a value between 0 and 255 for each of the components. In HSL, you’ll use a value between 0 and 360 for the first parameter and a value between 0% and 100% for the second and the third parameter.

body {
    background: hsl(320, 50%, 75%);
}

Below are some lists with useful values for creating HSL colors.

HUE

• red: 0
• yellow: 60
• green: 120
• cyan: 180
• blue: 240
• magenta: 300

SATURATION

• 0%: fullydesaturated
• 50%: neutral
• 100%: fully saturated

LIGHTNESS

• 0%: black
• 50%: neutral
• 100%: white

HSLA

HSLA is basically the same as HSL, but like RGBA it also has an alpha channel. The fourth value should also be a number between 0.0 and 1.0.

body {
    background: hsl(320, 50%, 75%, 0.8);
}