Interactive HTML Tutorial

Appendix: Specifying HTML Colors

There are two ways to specify colors in HTML ... using hexadecimal (hex) codes or color names.

Important note:Whenever you specify color in an HTML document, you must spell is as "color" not "colour".

Hexadecimal Color Codes

Colors are defined by a hexadecimal number or code, where the overall color is determined by its proportion of red, green, and blue.

Some examples of hexadecimal codes are:

#66FF00 #FF0000 #FF3300	#FFCC33 #0D0080 #8B008B	#DAA520 #0F00CD #00B800

Note that the 0 is the number 0 and NOT the letter O.

Most web designers and programmers use some kind of color picker tool to get the hex codes for various colors. Many HTML editors have them built in.

One of the easiest tools to use is ColorCop, which is a handy little tool that shows you the hexadecimal code for any color that you click on with its little eyedropper. It also lets you pick a color and then change its hue and saturation. When you are done it shows you the hex code.

Simply right-click on the link below, then select save target as. You will have to unzip it to use it, but you don't have to install it. Just click on its icon and it will start up immediately.

Download ColorCop

To see some many of the commonly used hex codes displayed in color charts, take a look at this chart:

Cross Browser Colors

Color Names

There are just over 140 defined color names available that are supported by all of the major browsers. The only problem with using named colors instead of hex is that people do use other browsers and the results can be unpredictable.

Here is the full chart of HTML Color Names supported by the major browsers:

HTML Color Names

Specifying BODY Tag Colors

Body colors are those that are set as the default colors for your web page. You can set the colors of the background, text, links, visited links and activated links.

The body colors are all set in the body tag itself.

For example ... here is a sample body tag

<body bgcolor="#99CCCC" text="#000000" link="#C0D9D9" vlink="#663399" alink="#ffcc99">

or

<body bgcolor="white" text="MidnightBlue" link="DarkMagenta" vlink="MediumOrchid" alink="DeepPink">

You can change various pieces of text within your page to different colors by setting new tags throughout the page, but the body colors remain the default colors.

In the following explanations of how to set colors,"#xxxxxx"is either the hexadecimal code, or the "colorname" for your selected color.

Setting the Background Color:

bgcolor="#xxxxxx"

This code sets the background color for your page. If you have a background image, you can still select a background color for your page. This background color will show until the image file has loaded. It is a good idea to select a background color that is similar to your background image. That way, if for some reason the background image does not load, your page will still look "nearly" right!

Setting the Text Color:

text="#xxxxxx"

This code sets the text color for your page. If you do not specify a text color, it will automatically default to black.

Setting the Link Colors

Link color:

link="#xxxxxx"

This code sets the color for your links. It is color of a link before it has been followed.

Visited link color:

vlink="#xxxxxx"

This code sets the color for viewed links. It is color of a link after it has been followed.

Activated link color:

alink="#xxxxxx"

This code sets the color for activated links. It is color of a link while it is being followed

Setting Font Colors

You can vary your colors at any time within your document by using


The font color will remain changed until you close with 

For example:

C O L O R! displays as: C O L O R!