Lessons | previous | next |

16. Colorful and Textured Backgrounds

The background of your page should be just that -- in the background. As we add different colors or even patterns, keep in mind that it should not interfere with the readability of text. But don't take our words for gospel, draw your own conclusions from an example of what happens when you do not think about the impact of a noisy background.

For the pages of this tutorial, we have used a solid white color that makes for a clean and non-interfering (even if not dramatic) backdrop. No, it is not very exciting, but it is readable.

With some modifications to the <body> tag (introduced way back in lesson 1), you can add a solid color background to your web page. But before we show you how to do the fancy color stuff, we must first talk about RGB color values and their "hexadecimal" representation.

"Hex-Dec" and Color Basics

In a web browser, you have at your disposal many system colors to color text and backgrounds. Each color is identified by its

Red- Green- Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets.

Here is the tricky part. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue.

Here are some hexadecimal examples of different colors:

ColorHex Code         ColorHex Code
xx oo xx FFCCCC         xx oo xx 3300FF
xx oo xx 33FF66         xx oo xx AA0000
xx oo xx 663300         xx oo xx 9900FF
xx oo xx 000077         xx oo xx FFFF00
xx oo xx EEEEEE         xx oo xx 888888
xx oo xx 444444         xx oo xx 000000
Now, don't panic about having do a bunch of numerical conversions! There are many tools that will let you click on a color and they will provide the hexadecimal representation. Many color tools are available from those folks at Yahoo.

But better yet, many browsers support standard shorthands for these 16 colors (those Windows VGA favorites):
ColorName         ColorName
xx oo xx aqua         xx oo xx black
xx oo xx blue         xx oo xx fuchsia
xx oo xx gray         xx oo xx green
xx oo xx lime         xx oo xx maroon
xx oo xx navy         xx oo xx olive
xx oo xx purple         xx oo xx red
xx oo xx silver         xx oo xx teal
xx oo xx white         xx oo xx yellow

  • file size: Adding a background texture will require that an additional graphic file be downloaded. We suggest that the image files be less than 10k in size.
  • readability: Be selective! Many background texture files are more distracting than enhancing for readability. Try to use background textures that are very light (with dark text) or very dark (with light text). Select for high contrast with the text and its background.
  • effect: In the first web browsers that used backgrounds, the page would not appear until the background file was downloaded. This might mean for a slow connection, your reader might have to wait long for the background image to arrive before even seeing any content! However, later browsers download the background last so the page first is grey, then the text and graphics appear, and lastly the background arrives. REMEMBER! The load time for your pages will likely be slower (considerably for older modems) when your pages are read from a web server.
    • previous: "Standard vs Enhanced HTML" | next: "Don't Blink, Don't Marquee" |