Adding Color
to an HTML Doucment

One of the requirements of your index.html web page assignment is to change the background color and if necessary the text color. By default the text color is an HTML document is black. If you want to now give your web page a black background, the text would become invisible. you would need to also change the text color to white or some other light color. The <BODY> tag allows you to set many attributes in your web page including:

  • A background picture
  • A default text color
  • Link colors
  • A program or script to run
To see all the attribute of the <BODY> tag and how to use them, you can visit the Web Design Group web site.

Changing the Background and text Color

To change the background color of a document you must use the bgcolor= attribute inside the <BODY> tag. The color can be set to one of 16 pre defined colors. Those colors are:

Aqua
Black
Blue
Fuchisa 		Gray
Green
Lime
Maroon 		Navy
Olive
Purple
Red 		Silver
Teal
White
Yellow
Remember, the background color must contrast with the text color or the text will be hard to read. If you use a dark background like Black or Navy, your should use a light color text like White or Yellow. Here is an example of how to set the background and text color.

< BODY bgcolor="black" text="white" >

rNotice, there is a space between the attributes. In general, most examples show the attribute value as quoted even though attributes will usually work if they are not. Feel free to change the link or the visited link colors in your document as well.

Creating a Custom Color

HTML lets you create a custom color by using a 6 digit hexadecimal number with a pound sign ( # ) in front. The # symbol means a hexadeximal number follows. Custom colors are represented with their RGB index. RGB stands for Red, Green, Blue and all colors can be created by mixing various quantities of these three. Because we live in the computer world, the RGB values are be represented by three bytes of data, 1 byte for red, 1 byte for green and 1 byte for blue. We know that a byte can represent the numbers 0 through 255. In hexadecimal color notation, the first 2 hex numerals represent red, the second 2 hex numerals represent green, the third 2 hex numerals represent blue.

Here are some examples of hexadecimal color notation:

  • #FF0000 = Red
  • #00FF00 = Green
  • #0000FF = Blue

This chart shows the details of the bgcolor attribute creating a yellow background.

bgcolor = # FF FF 00
↑ ↑ ↑ ↑
attribute Red index Green index Blue index
↑ ↑ ↑ ↑
bgcolor is the attribute.
It is set using the equal sign.
The pound sign (#) means the number that follows is in hexadecimal. 		A hexadecimal number representing 255 A hexadecimal number representing 255 A hexadecimal number representing 0

Choosing a Custom Color

1. Open the MS Windows Paint program by going to the start button → All Programs → Accessories → Paint. =
2. Select the Edit Colorsattribute from the colors menu.
3. Click on the Define Custom Colors button in the middle of the window. It will expand and you will see the following window. Use your mouse and the slider bar to the right of the color box to create a light custom color to be the background of your web page.

4. When you have decided on your color, write down the numbers in the 3 boxes at the bottom right of the Edit Colors window. Notice the top number is the Red Index, the middle number is the Green Index and the bottom number is the Blue Index. These numbers will NOT work in the bgcolor= attribute until you convert them to hexadecimal. If you do not remember how to do this from the unit on Binary and Hexadecimal conversion, you can use the windows scientific calculator.




For more information on HTML tags and how they are used you can go to the Web Design web site at:

http://htmlhelp.com/reference/