Read my article HTML5 apps as a learning tool
<Table of Contents>
Get Details on GreenGeeks Secure Hosting Learn HTML5 Today!
>>
- Bob's HTML Course - Take HTML5 Lessons - Twitter - Dave's Blog - Learn on your iPad
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under

HTML Code ColorChapter: Using Color Codes

FatCow Web Hosting. Free Trial , Free Setup, Free Support -- All risk free!

HTML Tutorial Chapters:  

iPage Hosting $95 Plan on sale today for $1.89/mo
Click Here for More Details!

FatCow Plan for $3.15/mo. only

Get Web Design Basics for iPad

Web Design Basics

I have a new iPad Course: Web Design Basics.   Download your copy now from AppStore.
Web Design Basics covers both HTML and CSS together in one interactive guide.   Get it Now!


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.

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