New CSS3 color formats and alpha transparency

So far in this chapter, we have looked at how CSS3 has given us new powers of selection and the ability to add custom typography to our designs. Now, we'll look at ways that CSS3 allows us to work with color that were simply not possible before.

Firstly, CSS3 provides two new ways to declare color: RGB and HSL. In addition, these two formats enable us to use an alpha channel alongside them (RGBA and HSLA respectively).

RGB color

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;
}

Note

For a great post describing how to understand HEX values more intuitively, I can recommend this blog post at Smashing Magazine: http://www.smashingmagazine.com/2012/10/04/the-code-side-of-color/

However, with CSS3, that color can equally...