Understanding Hexidecimals

... Recommend this page to a friend.

The first step in creating an excellent page is picking out colors. You can define the background color or pattern, text color, link color, and visited link color. The HTML necessary to do this is a series of attributes added to the <body>tag. The complete tag looks like this:

BGCOLOR is the background color of the page. TEXT is the principal text color found on the page; always make sure that this color is visible on the background you choose. LINK is the color of any hypertext that has not been visited yet. VLINK is the color of visited hypertext; and ALINK is the color of an active link (Selected, but not followed).

In place of "xxxxxx" enter one of these hexidecimal codes:

Black = 000000
White = FFFFFF
Grey = 999999
Brown= 7F2301
Purple = CC33FF
Red = FF0000
Yellow = FFFF66
Green = 00FF00
Blue = 0000FF
Light. Blue = 00CCFF

It should also be noted that one must be careful when typing in color commands. If spelled "colour", the attributes will not function, and will default to the browser's settings. This can be a mixed blessing at best.

Lastly, you may notice through experimentation (or by accident) that color hexcodes will work without the pound (#) symbol, and sometimes even without the quotation marks. Suggestion, leave them in there. Older browsers require them to function properly. This applies to most any attribute value throughout HTML.

Using Background Images

If you have a background image (wallpaper) you would rather use instead of a flat color, enter:

<body background="yourfilenamehere.gif"> ... in place of

<body bgcolor="#xxxxxx">.

This will create a tiled background images behind all other items on the page. The background image will scroll with the text and other images on the page. At some point, you may wish to create a background image that does not move, but instead has text and other objects scroll over the top of it. This can be accomplished either with javascript, or by adding "bgproperties=fixed" to the <body>tag, like this:

<body bgproperties="fixed" background="yourimage.jpg"> That's all there is to coloring your page. Easier than crayons, huh?

The really technical stuff:

For those of you who want to know more (I know you're out there, don't be bashful), the hexidecimal codes above are codes your computer uses to recognize the red/green/blue pattern that makes up a particular color, much the way a color television does. An explanation of how hexidecimals function is extremely complicated, and requires a considerable knowledge of math. If you feel up to the challenge, the rewards for your page can be quite impressive. This information can be found by clicking here

Precisely what is a "Browser-Safe Color Palette"? On the page detailing hexidecimals you can read (or have already read) that any series of hexidecimal numbers and letters (0-9 and a-f) would make a unique color; and this is true ... to a point. Of all of the 268,435,455 possible combinations, only 216 are universally recognized by all internet browsers. If you want to use other colors (#603442, for example, which is a dusty-rose color) feel free, but if the viewer's browser cannot support these "Non Browser-Safe Colors", then either nothing will be displayed, or the browser will use the closest approximation it can find. The later case is usually okay, but the former can be disastrous; I would highly recommend you select your colors from the palette to your right

Hexidecimals and Base 16

On the page entitled "Take Control of Your Color Scheme" I outlined the basics of hexidecimals, and explained that the codes used to determine colors in HTML are actually a description of a red/green/blue light pattern. By modifying these codes from the "normal" ones, you can create various different shades of the basic colors.

The first step is to understand base 16 numbers. Mathematics as taught in school are what is known as base 10, that is a "ones" place, a "tens" place, etc. Some may call this place value, or something similar. Base sixteen works the same, save that the "place values" are much larger numbers. In base 10, each place value is ten times larger than the place immediately to it's right. In base sixteen, the same is true, save that each place is sixteen times larger. For example:

1*1=1
1*10=10
10*10=100
10*100=1000, and so on.

1*1=1
1*16=16
16*16=256
16*256=4096, and so on.

Along these same lines, numbers in base ten can be 0-9 before they carry over to the next "place value". Similarly, numbers in base sixteen may be 0-15 before they carry over. Therefore, we need to figure out how to refer to numbers 10-15 as one-digit statements. And so, alphabet to the rescue. When you look at a hexidecimal statement, "FC082D" for example, read the F as a 15, the C as a 12, etc.

Therefore:
1=1 2=2 3=3.....A=10 B=11 C=12 D=13 E=14 and F=15.

So if we were to convert the example above back into base 10, we would do as follows:

D=13, so make a note of 1*13, because D is in the "ones place".
2=2, so write down 2*16, as 2 is in the "sixteens place"

Next, 8=8, so we get 8*256. Then we have a zero, so 0*4096. This is still zero, no matter what numeric base you are using.

C=12, so mark 12*65536. Finally, write 15*1048576 for the sixth and (thankfully) final position. You can probably tell without adding up this nightmare that it will be a very large number, however, luck favors us not. We're not through yet. 1*13=13, 2*16=32, 8*256=2048
0*4096=0, 12*65536=786432
15*1048576=15728640

When we add this monstrosity together, we get 16,517,165. All that work for one little number, but the number above is in base ten. Now you know why the computer figures out hexidecimals for you.

Each and every possible number derived from these six-digit hexidecimal codes represents a possible color for your webpage. I'll be nice and spare you a bunch of math. "FFFFFF" works out to 268435455. That's a lot of colors, but believe it or not, that is the total number of shades your computer and/or TV can recognize.

Remember, the higher the number, the closer to white the color will be. This is, of course, speaking in terms of ROY G BIV (Red Orange Yellow Green Blue Indigo Violet), or the spectrum of visible light. White can be found at the red end, and black at the violet end.

I suggest you play around with the numbers and find the colors you like best. As you tinker with the various possibilities, you will begin to notice some patterns that will assist you in picking exactly the right colors.

And for your viewing pleasure; doing so, note the hexidecimals:

Color Chart 1	Color Chart 2	Color Chart 3	Color Chart 4
Color Chart 5	Color Chart 6	Color Chart 7	Color Chart 8

The one I copied and have on my Start menu (for my own use) is #8
You just copy the image, save it on your hard drive.
And put a shortcut to it in the Start menu.

We return to the … Navigator … heart of this site.