HTML Color Codes

In the Introduction to HTML-tags section, we introduced HTML Color Codes briefly in the context of learning about html attributes. You placed a new color value in the bgcolor attribute of the body tag <body bgcolor=pink>.

Although HTML supports a number of color names such as red, green, blue, navy, orange, yellow and pink, these are not very subtle colors and probably will not be a sufficient color palette for a serious web designer. This is why HTML allows you to pick a color from a huge range by specifying a hexadecimal Red-Green-Blue value. Just prefix the number with a pound sign (#). For example, bgcolor="#FF0000" is the same as "red" while "#00FF00" is the same a "green".

Of course, by now you're either thinking "hexa-who?" or simple "you've got to be joking!". Yeah, you aren't really expected to remember all the color combinations. This is what a color-picker is used for. You can either choose the color you are after from a chart or use a program that lets you select a color.

WebColor, a free-to-use web color picker:

Here's a little program you can download and use for free. It's called WebColor and it provides a palette of the 216 most safe colors for use on the web. Just click the color you want and the HTML Color Code will be copied to the Windows clipboard, ready for pasting into your page.

Download WebColor Now (~300k)

Web-safe HTML Color Codes?

Although not as important as it once was, the 216 colors displayed above are the colors most guaranteed to display correctly in all browsers. If you can, it is very good to stick to these colors whenever possible.

One of coolest places to use color codes is in the "style" attribute. The style attribute is one of those cool attributes with tons of power which we won't cover quite yet. Suffice it to say that you can use it to assign a color value like this style="color:red". The style attribute can be added to almost any HTML tag. Here's an example in HTML-Help-Toy. Try changing the color codes to how it works.