Red, Green, and Blue (RGB) 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, a red color might be defined in CSS as a HEX (hexadecimal) value, #fe0208:

.redness {
  color: #fe0208;
}

However, with CSS3, that color can equally be described by an RGB value:

.redness {
  color: rgb(254, 2, 8);
}

Most image editing applications show colors as both HEX and RGB values in their color picker. The Photoshop color picker, has R, G, and B boxes showing the values for each channel. For example, the R value might be 254, the G value 2, and the B value 8. This 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 (as we have in the previous code).

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

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). How do I know this? Simple.

HSL works on a 360° degree color wheel. It looks like this:

The first figure in a HSL color definition represents Hue. Looking at our wheel we can see that Yellow is 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 in an HSL definition are for saturation and lightness, specified as percentages. These 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 color can be defined in HSL values as follows:

.redness {
  color: hsl(359, 99%, 50%);
}

If we wanted to make a slightly darker color, we could use the same HSL value and merely alter the lightness (the final value) percentage value only:

.darker-red {
  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 Ruby, Node, and .NET guys and gals at the office party and earn some quick kudos!

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 so something beneath an element can 'show through'.

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). For example:

.redness-alpha {
  color: hsla(359, 99%, 50%, .5);
}

The RGBA syntax follows the same convention as the HSLA equivalent:

.redness-alpha-rgba {
  color: rgba(255, 255, 255, 0.8);
}

Although in the very early specification stages, it should be possible in the not too distant future to enjoy color manipulations in CSS using the color() function.

Until there is wide browser support, this kind of thing is best handled by CSS pre/post processors (do yourself a favor and buy yourself a book on the subject right now; I recommend Sass and Compass for Designers by that wonderful chap, Ben Frain).

You can follow the progress of the CSS Color Module Level 4 at http://dev.w3.org/csswg/css-color-4/.