RGB (Red, Green, and Blue) is a coloring system that's been around for decades. It works by defining different values for the red, green, and blue components of a color. For example, the red color used for the odd numbered navigation links on the And the winner isn't... site is currently defined in the CSS as a hex (hexadecimal) value, #fe0208:

nav ul li:nth-child(odd) a {
  color: #fe0208;
}

However, with CSS3, it can equally be described as an RGB value:

nav ul li:nth-child(odd) a {
  color: rgb(254, 2, 8);
}

Most image editing applications show colors as both hex and RGB values in their color picker. The following screenshot shows the Photoshop color picker, with the R, G, and B boxes showing the values for each channel:

You can see that the R value is 254, the G value is 2 and the B value is 8. Which is easily transferable to the CSS color property value. In the CSS, after defining the color mode (for example, rgb) the values for red, green and blue colors are comma separated in that order within parenthesis.

Besides RGB, CSS3 also allows us to declare color values as HSL (Hue, Saturation, and Lightness).

What makes HSL such a joy to use is that it's relatively simple to understand the color that will be represented based on the values given. For example, unless you're some sort of color picking Ninja, I'd wager you couldn't instantly tell me what color rgb(255, 51, 204) is? Any takers? No, me neither. However, show me the HSL value of hsl(315, 100%, 60%) and I could take a guess that it is somewhere between Magenta and Red color (it's actually a festive pink color—perhaps I'm starting to like Moulin Rouge after all). How do I know this? Simple…

HSL works on a 360° color wheel. The first figure in a HSL color, represents Hue, and has Yellow at 60°, Green at 120°, Cyan at 180°, Blue at 240°, Magenta at 300° and finally Red at 360°. So as the aforementioned HSL color had a hue of 315, it's easy to know that it will be between Magenta (at 300°) and Red (at 360°). The following two values for saturation and lightness, specified as percentages, merely alter the base hue. For a more saturated or colorful appearance, use a higher percentage in the second value. The final value, controlling the lightness, can vary between 0 percent for black and 100 percent for white.

So, once you've defined a color as an HSL value, it's also easy to create variations on it, merely by altering the saturation and lightness percentages. For example, our red navigation links can be defined in HSL values as follows:

nav ul li:nth-child(odd) a {
  color: hsl(359, 99%, 50%);
}

If we wanted to make a slightly darker color on hover, we could use the same HSL value and merely alter the lightness (the final value) percentage value only, as shown in the following code snippet:

nav ul li:nth-child(odd) a:hover {
  color: hsl(359, 99%, 40%);
}

In conclusion, if you can remember the mnemonic Young Guys Can Be Messy Rascals (or any other mnemonic you care to memorize) for the HSL color wheel, you'll be able to approximately write HSL color values without resorting to a color picker and also create variations upon it. Show that trick to the savant backend PHP and .NET guys at the office party and earn some quick kudos!

As you might have guessed, RGB and HSL are not supported in Internet Explorer versions below IE9. Therefore, if a fallback color declaration is needed for these browsers, specify it first before the RGB or HSL value. For example, the navigation link rule defined above could have a hex fallback specified like this:

nav ul li:nth-child(odd) a {
  color: #fe0208;
  color: hsl(359, 99%, 50%);
}

So far you'd be forgiven for wondering why on earth we'd bother using HSL or RGB instead of our trusty hex values we've been using for years. Where HSL and RGB differ from hex is that they allow the use of an alpha transparency channel. This means one element with an alpha transparency will show what's beneath it.

Let's make some amendments to the And the winner isn't... home page to illustrate. First, we'll set a grungy background image in the body element, as follows:

body {
  background: url(../img/grunge.jpg) repeat;
}

Now, we'll add a white background in the #wrapper div (which encloses all the other elements). However, instead of setting a solid white color with a hex value, we'll set a HSLA value as shown in the highlighted line in the following code snippet:

#wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 96%; /* Holding outermost DIV */
  max-width: 1414px;
  background-color: hsla(0, 0%, 100%, 0.8);
}

An HSLA color declaration is similar in syntax to a standard HSL rule. However, in addition, you must declare the value as hsla (rather than merely hsl) and add an additional opacity value, given as a decimal value between 0 (completely transparent) and 1 (completely opaque). Here, we have specified that our white #wrapper isn't completely opaque. The following screenshot shows how it looks in the browser:

The RGBA syntax follows the same convention as the HSLA equivalent, using an additional opacity value after the color:

background-color: rgba(255, 255, 255, 0.8);

Hopefully you can see that the addition of an alpha channel to both the RGB and HSL color modes, allows us a great deal of flexibility when layering elements. It means that we no longer have to rely on the transparency of images (PNG and GIF images, for example) to achieve this type of visual effect, which is great news when building a responsive design.

The CSS3 Color module was the first of the CSS3 modules to reach the advanced Recommendation stage. Therefore, like the CSS3 Selectors module, CSS3 Colors are good to use right away, safe in the knowledge that the method of implementation is unlikely to change from this point onwards.