HTML Code ColorChapter: Using Color Codes

iPage Web Hosting. Free Domain Registration, Free Setup, Free Support -- All risk free!

One of the great things about modern computers is that there are millions of colors available to you as a web designer. While you can use an actual description name for basic colors, like this:

You could also use the hexadecimal code for red, which is #FF0000.

Hexadecimal codes are made by mixing the colors of red, green, and blue (in that exact order). But it uses a special system of 16 digits instead of 10. Normally you would count 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. But in hex, you count 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A B C D E F.

Imagine styling a table. The basic table format HTML code would look like this:

<table cellpadding="2" cellspacing="3">
<tr>
<td>this is a cell</td><td>this is another cell</td>
</tr>
</table>

(Tables are covered in Chapter 12.)

But, we want to make the background color of the table row, so we add an attribute:

<table cellpadding="2" cellspacing="3">
<tr bgcolor="#FF0000">
<td>this is a cell</td><td>this is another cell</td>
</tr>
</table>

The table would look like this:

this is a cell

this is another cell

This example is not meant to win any design awards. And in common practice, you'd want to use a CSS style (covered in CSS: An Interactive Tutorial for Beginners) to stylize the colors on your page using background-color and not bgcolor but that's beyond the scope of this page. Don't worry about it for these examples.

• The first two digits are the red color blend, from nothing ( 00 ) to full red ( FF ).
• The first two digits are the green color blend, from nothing ( 00 ) to full green ( FF ).
• The first two digits are the blue color blend, from nothing ( 00 ) to full blue ( FF ).

Web Hosting by iPage - Affordable and E-Commerce Enabled

Get details on how to set up and configure your .com. (It only takes a few minutes.)

There are 16.7 million color combinations possible, although your web page should only use a few at a time.

To further the examples, here is a list of possible blacks and whites.

#000000 - AaBbCcDdEeFf1234567890	Background #000000
#111111 - AaBbCcDdEeFf1234567890	Background #111111
#222222 - AaBbCcDdEeFf1234567890	Background #222222
#333333 - AaBbCcDdEeFf1234567890	Background #333333
#444444 - AaBbCcDdEeFf1234567890	Background #444444
#555555 - AaBbCcDdEeFf1234567890	Background #555555
#666666 - AaBbCcDdEeFf1234567890	Background #666666
#777777 - AaBbCcDdEeFf1234567890	Background #777777
#888888 - AaBbCcDdEeFf1234567890	Background #888888
#999999 - AaBbCcDdEeFf1234567890	Background #999999
#AAAAAA - AaBbCcDdEeFf1234567890	Background #AAAAAA
#BBBBBB - AaBbCcDdEeFf1234567890	Background #BBBBBB
#CCCCCC - AaBbCcDdEeFf1234567890	Background #CCCCCC
#DDDDDD - AaBbCcDdEeFf1234567890	Background #DDDDDD
#EEEEEE - AaBbCcDdEeFf1234567890	Background #EEEEEE
#FFFFFF - AaBbCcDdEeFf1234567890	Background #FFFFFF

You can see how 00 creates dark and FF creates light.

Here are some random colors picked just for example:

#FFFF00 - AaBbCcDdEeFf1234567890	Background #FFFF00
#00FFFF - AaBbCcDdEeFf1234567890	Background #00FFFF
#FF00FF - AaBbCcDdEeFf1234567890	Background #FF00FF
#ABCDEF - AaBbCcDdEeFf1234567890	Background #ABCDEF
#FEDCBA - AaBbCcDdEeFf1234567890	Background #FEDCBA
#A1F4BB - AaBbCcDdEeFf1234567890	Background #A1F4BB

continue to part 2... >

Learn about getting a host for your web site.