Web Colors
Introductions Ideas Work Humor Life, The Universe, & Everything For Sale Politics Freebies Web Colors 256 Color Safety 216 Color Chart I 216 Color Chart II Colored Text 0 Colored Text 1 Colored Text 2 Colored Text 3 Colored Text 4 Colored Text 5 Colored Text 6 Colored Text 7 Colored Text 8 Colored Text 9 64 Colors Grays and Shades Colors w/Names 80 Color Chart I 80 Color Chart II Credits Links Web Cams Mensa E-Mail Me Site Map
Introduction to HTML Colors
for Web Page Text and Backgrounds
These pages were first developed back in the early days of the World Wide Web to discuss web colors and demonstrate some color options.

If you just want to see some pretty colors, click on the other menu options now. The rest of this page is tutorial, and pretty dry.

Q: So What are my color choices?
A: Pick one, two or all three: Red, Green, & Blue

The key to text and background colors on the Web, is mixing Red, Green and Blue.
  • Each of these three primary colors can be presented at 256 different levels (shades) and blended with the other colors to produce the final color. typically we produce background colors and font colors with these codes.
  • 256 cubed is 16,777,216, or 16 Million Colors. You'll see that number used fairly often when referencing specifications for computer video and video settings.

Remember that you are mixing colors of light, and not mixing colors of paint. More of a given color light is brighter, less is darker; where more of a given color of paint is darker. The same rules apply to web pages, as apply to lighting designers for stage, screen or department store windows.

Q: What's with the "FFFFFF" ?
A: You are counting to 10 in hexadecimal. You are not counting to 10 in decimal.

Q: Say WHAT????
A: Computers count to 10 in just two steps.

0, 1, 2, 3 to humans, is 00000000, 00000001, 00000010, 00000011 to a computer.

Note that in this 0-1-2-3 example, I used 8 characters to tell the computer side of things. That's an important part of how computers calculate and think.

People have 10 fingers and 10 toes so it's no surprise that humans organize counting in units of 10. We call that a "Base 10" or "decimal" numbering system.

Computers count in units of 2 (on/off), often called Binary.

In geek speak, 2 to the 8th power is a byte, and 2 to the 4th power is a nibble. Long ago, it was determined that a good way translate computer "binary" into something us humans could use was "Base 16" (2 to the 4th power), because 16 is close enough to 10 that most humans can still wrap their brains around it.

Compare counting to 17 in Hex and Decimal:
    Dec 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    Hex 0 1 2 3 4 5 6 7 8 9 A B C D E F 1011
We use the base-16 numbering system "Hexadecimal" (2 to the 4th power) to tell your browser how much of each of the three primary colors to use in the mix:
Q: Um, Thanks for the tutorial. Can you PLEASE just tell me how the codes work?
A: Um, Sure.

Color declarations are six characters: "RRGGBB" where:
        RR _ _ _ _ = Red
        _ _ GG _ _ = Green
        _ _ _ _ BB = Blue).

Using two Hexadecimal digits (0-F) we express the 256 possibilities (16 to the 2nd power) in each of the three colors of light (red, green, blue):
        00 = 0%
        80 = 50%
        AA = 66%
        FF = 100%

Here are some real HTML color codes (at last):
  • SAMPLE   FF0000 is 100% Red
  • SAMPLE   00FF00 is 100% Green
  • SAMPLE   0000FF is 100% Blue
  • SAMPLE   008080 is 50% Green + 50% Blue
  • SAMPLE   808080 is 50% Red + 50% Green + 50% Blue (a shade of grey)
  • SAMPLE FFFFFF is 100% Red + 100% Green + 100% Blue (white)

While not 100% necessary, a color declaration should be in quotes and have a # sign.
  • This Will Work: < font color=0000FF > < TD BGcolor=0000FF >
  • This Is Better: < font color="#0000FF" > < TD BGcolor="#0000FF" >

Using Quotes and the # is better because it helps most web browsers understand that "right here" you're making a color delcaration. Other places where colors are declared may not even work without the "# " so it's a good habit to have in normal HTML programming.

Q: YUCK! Were there other options?
A: Yup, but it's not less complex

This can be a bit of a brain twister if you don't know a little bit about how us humans tell them computers what to do. The audience for this box is folks who "sorta" know about "Binary" "Hexidecimal" and "decimal" as used in programming. What we're describing is the different methods used to describe that legendary second step in computing: The "Byte." A Byte is eight on/off bits of computer memory. Two to the eighth power (2^8) is 256, and 256 is the base number in computer counting systems.

Counting and calculating in base 16 didn't work for some people so the designers came up with another computer based counting system called decimal. Decimal counts using the human base-10 system. You count up to 256 like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... 252, 253, 254, 255.

In Hexidecimal you count up to 256 this way: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12... 1D, 1E, 1F, 20..., and so on till you get all way to "256." That is described in Hex as: FB, FC, FE, FF.

In the case of HTML colors, it makes sense to use 6 characters to define 16 Million Colors (256 to the 3rd power) in Hexadecimal rather than taking 9 (or 11) characters to do it in decimal. If HTML colors were expressed in decimal you'd need 9 or 11 characters to define all the colors instead of 6:
    100% red = FF0000 (hexadecimal)
    100% red = 256000000 (decimal)
    100% red = 256,000,000 (with commas to help humans read it.)

9 to 11 digits is a lot of numbers, so a 9-digit decimal definition for HTML colors probably would have been separated by something to make it easier for humans to focus on; probably commas. Now you're talking 11 characters (including comma's) to express a color as in the example above.

Colors in Tables:
You can set background colors in tables at three different levels.
  • < TABLE BGCOLOR="#000000" >Sets background color on an entire table
  • < TR BGCOLOR="#333333" > Sets background color on an entire row within a table
  • < TD BGCOLOR="#999999" > Sets background color within a single cell within a table. On most browsers that color will remain in effect for the balance of the table or until another background color is declared in a different cell.

Color Names:
You can declare the following colors by name as in
    < font color=teal > - or - < TD BgColor=maroon >
Valid color names are:
    Aqua, Black, Blue, Fuchsia,
    Gray, Green, Lime, Maroon,
    Olive, Purple, Red, Silver,
    Teal, Yellow, Navy and White.
You can see them in action by following the link at the top of this page.
Special problems for 256 color systems:
As much fun as 16 million colors are, you must always be aware that they will not appear the same on any two different systems. Not even on two identical computers fresh out of their boxes.

Hopefully you already know that, so brace yourself for an even thornier problem. Some web browsing systems are still set up to display only 16 or 256 colors, not 16 or 32 million.

If your potential client is looking at a computer that only displays 256 colors, he or she won't see your sublime selections of screen colors. If you use a palette outside of what their video card supports, what they'll see is a mottled color, as their video card tries its best to give them what you the designer intended. In the 21st century, this is still a consideration, though certainly less so than in the 1990's.

See the links at the left of this page for information on 256 color safe colors and some examples.
Other Resources: Visibone