Smashing Html5

Chapter 4: Working with Color Values

Up to this point, you’ve seen several examples of using color codes, but unless you understand what you’re looking at, you may as well be looking at the enigma code. In some examples, color names are used, but other than the basic colors, you need to understand how colors are constructed in CSS3. By doing so, you have access to millions of colors rather than a handful.

Understanding RGB Color

If you’ve ever mixed colors in anything from finger paints to a watercolor set, you have a sense of what happens when you mix colors. For computer screens, red, green and blue lights are mixed to generate different colors. For example, if you mix equal amounts of red and green, you get yellow.

To mix colors for Web pages, different values are mixed using integers, percentages, and hexadecimal numbers. CSS3 also has a limited number of named colors available that can help while figuring out the other color-mixing methods. HTML5 and CSS3 have some very sophisticated elements such as canvas that can do more with color and drawings than has been possible in previous versions of HTML. These advanced elements require a bit of JavaScript, and you’ll find them discussed in detail in Chapter 13. For now, we’ll get started with the basics.

Using names

One of the stranger experiences in working with HTML5 and CSS3 is the name set used with colors. At the root are the 16 standard colors shown in Table 4.1.

Table 4.1 Standard Color Names
Aqua	Black	Blue ...