davesite.com / webstation / html tutorial
Try our: CSS Tutorial, Web Design Tutorial

HTML Tutorial Chapters:  
...
HTML Tutorial
HTML Code ColorChapter: Using Color Codes

Ready to post your site online? Your top hosting picks:

Globat Hosting, $4.44 - GreenGeeks, $6.95 - Yahoo! Hosting, $6.47 - 1and1 Hosting, $9.99

Using Hexadecimal Color Codes

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:

code:<font color="red">this is red</font>
output on screen:this is red

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

code:<font color="#FF0000">this is red</font>
output on screen:this is red

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.

0 is the darkest (meaning black) and F is the lightest (meaning white).

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 cellthis 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 ).
#FF0000 - AaBbCcDdEeFf1234567890Background #FF0000
#00FF00 - AaBbCcDdEeFf1234567890Background #00FF00
#0000FF - AaBbCcDdEeFf1234567890Background #0000FF

Other colors are made of a mixture of red, green, and blue. For example, #FF3300 is an orange color and #FFFF33 is a yellow color.

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 - AaBbCcDdEeFf1234567890Background #000000
#111111 - AaBbCcDdEeFf1234567890Background #111111
#222222 - AaBbCcDdEeFf1234567890Background #222222
#333333 - AaBbCcDdEeFf1234567890Background #333333
#444444 - AaBbCcDdEeFf1234567890Background #444444
#555555 - AaBbCcDdEeFf1234567890Background #555555
#666666 - AaBbCcDdEeFf1234567890Background #666666
#777777 - AaBbCcDdEeFf1234567890Background #777777
#888888 - AaBbCcDdEeFf1234567890Background #888888
#999999 - AaBbCcDdEeFf1234567890Background #999999
#AAAAAA - AaBbCcDdEeFf1234567890Background #AAAAAA
#BBBBBB - AaBbCcDdEeFf1234567890Background #BBBBBB
#CCCCCC - AaBbCcDdEeFf1234567890Background #CCCCCC
#DDDDDD - AaBbCcDdEeFf1234567890Background #DDDDDD
#EEEEEE - AaBbCcDdEeFf1234567890Background #EEEEEE
#FFFFFF - AaBbCcDdEeFf1234567890Background #FFFFFF

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

Here are some random colors picked just for example:

#FFFF00 - AaBbCcDdEeFf1234567890Background #FFFF00
#00FFFF - AaBbCcDdEeFf1234567890Background #00FFFF
#FF00FF - AaBbCcDdEeFf1234567890Background #FF00FF
#ABCDEF - AaBbCcDdEeFf1234567890Background #ABCDEF
#FEDCBA - AaBbCcDdEeFf1234567890Background #FEDCBA
#A1F4BB - AaBbCcDdEeFf1234567890Background #A1F4BB

Go to Part 2, using hexadecimal colors with HTML and CSS!

Learn about getting a host for your web site.




Return to the Beginner's HTML Tutorial!

Copyright © 1996-2010 Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/hexchart.shtml