Edtech Home About Classrooms Classes Lessons and FAQs
Educational Technologies Center for Life Sciences

Exercise - Adding color to your page

You can selectively vary the colors of the background and text elements of your pages by using HTML codes that are attributes of the BODY tag. As such, they are enclosed within the body tag brackets.

What are hex codes?

Hex codes 6 digit notations for red, green and blue used by color video monitors, and reflect the amount of each primary color in any given color. The first two digits are the amount of red, the second two are the amount of green, and the third two are the amount of blue. Each separate digit can take the vaule of 0 to 9 and A to F, with 0 being the lowest and darkest and F being the highest and brightest. Thus #000000 is black and #FFFFFF is white. Additionally there are now about 140 color names that are now read by most browsers. Be sure to check these though, as they may not be universally recognized. "Hex codes" are safer.

Coloring the Background

<BODY BGCOLOR="#FFFFFF"> will produce a white background
<BODY BGCOLOR="red"> will produce a red background

Coloring text

<BODY TEXT="#000000"> will produce black text
<BODY TEXT="aqua"> will produce aqua text.

Coloring Links

<BODY LINK="#0000FF"> will produce green "unvisited" links
<BODY VLINK="#FF0000"> will produce red "visited" links
<BODY ALINK="#DB70DB"> will produce purple "active" links


There are a number of web sites that display specify the codes, as well as several shareware programs as well. Colorizing with HTML in this way is the best way to add impact and individuality to your pages without the network "expense" of having to download images. A couple of cautions are in order, however. One is that you have to be careful the your page remains legible as you vary the color contrast. The second is that color monitors and videocards vary a great deal, so that your careful color choices my look awful on another system - another good reason to try to test your pages on a variety of computers.


Step 1. You can combine these codes. Try this:

<BODY BGCOLOR="#0B0E97" TEXT="#FFFFFF" LINK="#FF00FF" VLINK="#00FF00" ALINK="#F2F20D" >

Here are some sites that offer the hex codes and color samples:

© 2004 - E. Barbara Meyer - EdTech Center - Life Sciences - University of Illinois - Urbana, IL USA