HexColorCodes

Hexadecimal Color Codes

The Hexadecimal Color Codes are used in HTML in the following way:

For Page Backgrounds: Located within the BODY tag as:

BGCOLOR="#000000"

For Text Colors: Located within the BODY tag as:

TEXT="#000000"

For Page-Wide Link and Text Colors: Located within the BODY tag as:

LINK="#000000" (where LINK is non-visited link color)
VLINK="#000000" (where VLINK is already-visited link color)
ALINK="#000000" (where ALINK is the color a link turns at the second it is clicked)

There are 16.7 million different colors in the hexadecimal color system. Each digit has a value from 0 to F, in the hexadecimal system. The hexadecimal color system counts by 0 1 2 3 4 5 6 7 8 9 A B C D E F, with 0 being null value, and F being highest value:

#000000 is black, and #FFFFFF is white

Each of the 6 digits in the hexadecimal code is broken into 3 separate groups...

#FF0000 - Red Color Value
If the first two digits (red values) are full (FF) and the other four are null (00) the color will be red.

#00FF00 - Green Color Value
If the first two are null (00), the third and fourth digits (green value) are full (FF), and the fifth and sixth digits are null (00), the color will be green.

#0000FF - Blue Color Value
If the first four digits are null (00), and the fifth and sixth digits (blue value) are full (FF), the color will be blue.

You may have wondered how the "basic color" yellow comes into the scheme. It looks like:
#FFFF00 - Yellow Color Value

Try experimenting - Add a background color to the <BODY> tag in your HTML page:

First, use one of the full-hued colors above. Save the HTML in Notepad and then open your Internet page and click Refresh to see the color.
REMEMBER TO ALWAYS Save your change in Notepad before choosing Refresh to see the change in your web document.
Next try changing the value of the color by lowering the numbers in the "full" digits, and see what the color looks like on your Internet page.
Then try changing the color by placing some numbers in the "null" digits:
For example, if you start with full red and change the numbers for the 5th and 6th digits (blue) to 99, your color number will be "#FF0099"--and when you look at it in your web page you should see a slightly purplish red.
Try other experiments to test your understanding of this system. It's pretty complex, so don't be concerned if you're not an instant expert!

Now, just to show you another way to add colors, try typing in the name of a standard color, like this:

BGCOLOR="BLUE"

and your background should become an intense blue. Try the names of other colors, even fancy names like "TEAL" and "FUCHSIA"--being very careful to spell correctly. Try these color experiments on your text as well as your background until you find a combination you like. Be sure that the color combination is easy for a viewer to read.

Copyright Notice: No materials on any of the Bellingham Schools' web pages may be copied without express written permission unless permission is clearly stated on the page.
Permission / Image Information / Return to Tech Connections Homepage / District Homepage

Bellingham Public Schools. 1306 Dupont St. Bellingham WA 98225-3198