Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents
This course was developed in much earlier days of the web and has been updated
into Web Design Basics for iPad (also written by me, but much better course!)
Try iPage Web Hosting -- Go Green for only $1.99/month (sponsored link)
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code ColorChapter: Using Color Codes

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

Go to Bob's New Tutorial

Using Hexadecimal 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:

Colors are now coded in CSS (cascading style sheets) and not using the HTML <font> tag. You can learn about the new way to use colors in my free tutorial: CSS: An Interactive Tutorial
Do you want a great web host?
The Package Includes...
Would you like to learn more?
Read the Details
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:

Order Green Geeks Hosting
<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.)

Learn about Hosting

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

continue to part 2... >

Learn about getting a host for your web site.

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.
Copyright © Dave Kristula. All rights reserved. Follow me on Twitter @firstdave
URL: http://www.davesite.com/webstation/html/hexchart.shtml


On a Budget? Get 100% Free Internet.