Why use Hexadecimal code?

Hexadecimal code is a string of six characters preceded by a hash ("#", pound sign). In HTML it is used as a value for a color instead of a word like "red" or "black":

color="#ff0000" instead of color="red"

The best reason to use hexadecimal code is that you have a broader range of colors to choose from. Browsers support pretty much any color that can be represented by hexadecimal code.

The Three Basic Colors

To understand hexadecimal code, it's good to understand how your monitor displays colors. Behind the monitor's screen (which is a longish tube with a flat flare that makes the screen part) are three electron guns. These guns are actually in the tube at its rear.

These electron guns fire electrons at the screen where they make pixels glow and form what you see on your screen. Each of these guns activates a different "color pixel" when it's fired. The three colors produced by these guns are red, green, and blue. All colors can be made by combining these three colors in varying intensities.

For example, when you see red in an area on your screen, the red gun is firing full blast and the green and blue guns are off in that area. Same goes for green and blue. Yellow is made by combining green and red. If you see bright yellow, the red and green gun are at full power and the blue gun is off.

White is made when all three guns are firing at full power. Black is made when they are all turned off. Greys are made when the red, green, and blue guns are firing at an equal rate somewhere between full power (white) and off (black).

The power used by each gun to make a color is referred to as the color's RGB, or Red Green Blue, value. This value can be expressed as a hexadecimal value.

The Organization Of Hexadecimal Code

Hexadecimal code tells each gun how much power to use. By manipulating this you can show any color you want within a few limits.

Hexadecimal code is a six character string preceded by a hash ("#", pound sign). Here's how the hex code is broken down:

The characters you can use include the digits 0-9 and the letters a-f. These form a counting system in which one character can represent a value from zero to fifteen instead of only from zero to nine. Here's how the letters are valued:

a = 10
b = 11
c = 12
d = 13
e = 14
f = 15

So the numberline for this would look like this:

0 1 2 3 4 5 6 7 8 9 a b c d e f

Zero is the lowest value and "f" is the highest.

To make a hex code, begin by typing in a hash ("#"). The first two characters determine the value of the RED gun. The middle two characters control the GREEN gun and the last two the BLUE gun. A value of "00" would turn a particular gun off. A value of "ff" would turn a gun on full blast. Values in between would produce a blended color. A value of "77" or "88" is about half power.

Remember that the guns are ordered Red Green Blue. Also remember that the value for each gun is represented by *two* characters. This makes six characters (six as in "hexa") and three values total.

In the #a4cf93 example used above, the red gun is set to a value of "a4". The green gun is at "cf" and the blue gun is at "93".

Some Examples

Now using what we know let's make some common colors in hex code. Remember that you'll probably use software to help you find colors and their hex values, but it still pays to understand how the hex system works. First lets make red:

#ff0000

We begin with the "#" sign. Then we turn the red gun on full blast by typing in a value of "ff". To make pure red, we'd turn off the green and blue guns with the "00" values.

We make pure green and blue the same way:

green -- #00ff00
blue -- #0000ff

To get black and white we need to turn all guns off and on respectively:

black -- #000000
white -- #ffffff

Now lets make pink, a lightened variety of red. To make any color lighter, we must add proportionately more power to each gun. More power means "whiter", less power means "darker".

pink -- #ff7777

Notice that the red gun is on full. The green and blue guns are at just below half power. The pink will become lighter as we increase the values for the green and blue guns:

lighter pink -- #ffaaaa

We can keep increasing power until the pink just fades to white (#ffffff).

Yellow is an even mixture of red and green:

pure yellow -- #ffff00

We can darken this to gold by reducing the red and green values:

gold -- #555500

We can make yellow lighter by adding more blue, i.e. heading toward white:

light yellow -- #ffffaa

Try the examples above by making a page with a BGCOLOR in hexadecimal code. Play around with the hex code and view the different background colors you get. You can, and should, use hexadecimal code whenever you define a color in an attribute like BGCOLOR or COLOR.

Using Pallettes and Software

One of the best freewares for picking colors and determining their hex codes is Swatch-O-Matic available at http://www.price-media.demon.co.uk/swatch.html. Click the link to download "swatch.zip". This small freeware has three slider bars that you can use to adjust the amount of Red Green Blue (RGB). The color is displayed in a preview screen. Below this screen is the hex code for the current color. There's a "Copy" button that will copy the hex code to your clipboard for later pasting in your HTML code.

Most HTML editors have some sort of palette of colors you can choose from. These are generally "Web safe" colors. Generally the palette is presented as a box of colored squares. Just click the color you want and the hex code is installed in your HTML. The hex code will appear wherever you cursor was on your HTML page before you picked the color.

These softwares can save a lot of time and experimenting when selecting a color. So, don't worry if you can't code a particular color off the top of your head. There's plenty of free help out there.

To Next Beginning HTML Lesson

Back To Beginning HTML Index