Step by Step HTML5

60 Chapter 4
Choosing Background and Foreground Colors
Many Web design experts caution against dark or patterned backgrounds on Web
pages, because they can make it difficult to read the text. Some designers go so far as
to say that you should not use any background color at all; they prefer that black text
on a white background be the norm. A quick look at a few major commercial Web sites
will confirm the near-universality of this opinion. Check out high-traffic sites like www.
msn.com, news.google.com, and www.microsoft.com, and you’ll find that the body text is
almost exclusively black (or another dark color) on a white (or other pale) background.
Rules are made to be broken, however, and you might find situations in which a colored
or patterned background is perfect for a certain page (or set of pages). For example,
you might assign a background color to a Web page that you want to differentiate from
other pages of a Web site.
Specifying Colors
The 16 basic colors presented earlier in the section, “Inserting Horizontal Lines,” are the
best colors to use on Web pages because they are universally accepted. Every browser
interprets these colors the same way. However, you will probably find many situations
in which none of those 16 colors is appropriate. For example, you might find that they
are all too dark or too vivid to make an attractive page background. Therefore, you will
sometimes need to rely on other ways of specifying colors.
One way to specify a color is by its RGB (red-green-blue) value. Using this method, you
can describe a color using a series of three numbers, from 0 to 255. Each number represents
the component of red, green, or blue that makes up the color. For example, pure
red is 255, 0 ,0; that is, maximum red (255), no green (0), and no blue (0). You can create
a large range of colors using these three values. For example, 255, 153, 0 represents a
particular shade of orange—full red, a little more than half green, and no blue.
Another way to express color values in HTML is by using a hexadecimal value. The hexadecimal
values represent the RGB values converted to the base-16 numbering system.
For example, the value 255 converts to FF, so the RGB value 255, 255, 0 can also be
expressed as the hexadecimal value #FFFF00.
The problem with defining colors by using RGB or hexadecimal values is that not every
display supports that many colors. Any unsupported colors appear as dithered (that is,
formed with a cross-hatch pattern of two colors blended together). Therefore, most Web
designers try to stick with what are called web-safe colors. A web-safe color is one that
exactly matches one of the colors in a standard 8-bit color display. Web-safe colors use