HEXADECIMAL COLORS

Tired of <BG COLOR="RED">? Dont you wish that you could have almost-purple, dark red? Well, wish no more. Your dreams have come true! You only need to learn about the wonderful world of Hexadecimal Colors!

Base-Ten System

Our normal system of counting is called a "base-ten" system. That means that at the lowest one-digit level, we have ten choices with which to count: 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9.

With a base 10 system, the lowest two-digit number we can make is 00, the highest is 99, giving us one-hundred choices in all.

* INTERESTING SIDE-NOTE: In the beginning of known civilization, all mathematics worked on a base-twelve system. We see the remnants of the old base-twelve system in our dozen, the twelve months of the year, twenty-four hours in a day, and twenty-four beers in a case. The base twelve system may have its roots in the 12 zodiac constellations, which were held to be of great importance.

Displaying Colors in Red, Green, and Blue

Every color in our visible light spectrum can be broken down into three colors: red, green, and blue. These are also the colors of the thousands of tiny light trios that make up your computers monitor. In search of perfect color, your computer must decide how much to illuminate each light so that proper hues can be created. The computer assigns a two-digit number to each color, red, green, and blue.

Using a base ten system, if a pixel was to be entirely red, its numeric value would be: #990000

RED GREEN BLUE

99 00 00

Utilizing a base-ten system, there are one million possible color choices. (100 * 100 *100) This isnt good enough for your computer.

The Hexadecimal Base-Sixteen System

Because the base-ten system only allows for one million colors, the computer uses a base-sixteen system when mixing colors. "Base-sixteen" is referred to as "Hexadecimal". Hex means six, and decimal means ten.

Web designers commonly refer to hexadecimal as "hex".

In the base-sixteen hexadecimal system, numbering begins in a normal fashion:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

But after "9", we need another one-digit number, signifying ten places from zero. Weve run out of standard numbers, so instead we use letters.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

In Hexadecimal, "A" is a signal digit number that means 10 places from zero. "F" is a single digit number that means 15 places from zero. "FF" would be the highest two-digit number. So, using a hexadecimal numbering system, pure reds numeric color value would be: #FF0000

RED GREEN BLUE

FF 00 00
Green would be: #00FF00

Blue would be: #0000FF

Purple would be: #FF00FF

The "#" indicates that we are a number and not a word.

Coloring with Hexadecimal

You can use hex colors in your tags. The following hex number produces a very muted yellow, suitable for reading:

Resources for Hexadecimal Colors

Unless youre some sort of color savant, you might have trouble mixing exact hexadecimal colors. Thank goodness there are resources available to help you. Palette Man is the one we recommend in our web design course. It allows you to pick hexadecimal colors, but also lets you match those colors alongside others.

http://www.paletteman.com

Web-Safe Colors

PCs and Macs dont display color exactly the same way. To make matters worse, different versions of different browsers display color differently, too. Basically, the browser display GIF and JPG color slightly differently than it does hexadecimal colors, even if theyre supposed to be the same. Most often the differences are not that dramatic, but every once in a while things really freak out.

There are 216 colors that display more or less the same, though. Those 216 colors are called "web-safe". Web designers use web safe colors to match the background color of their websites with the background color in their images.

It will not always be possible to use web-safe colors. For instance, A photograph will look horrible in the web safe palette, but it is a good idea to use web safe colors for backgrounds, buttons, banners, and the like.

Most web based color tools will allow you to choose from a web-safe palette, but if you want to manually code using web-safe, your only choices are (in any combination):

00, 33, 66, 99, CC, and FF.

Research has shown that even web safe colors may not be the same across all browsers anymore. If youre having trouble with a hex generated background color matching up with GIF or JPG color, you can use a one pixel tiled GIF background instead of code-generated background colors! Basically, youll create a very small image in software like PhotoShop or Fireworks. Then, youll color the small image with your desired hex color. You can use that small image as a background image, and it should match up with the other GIFs and JPGs on your page.

Continue on to Forms |