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
10
11
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:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,F
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):
SAMPLEFF0000 is 100% Red
SAMPLE00FF00 is 100% Green
SAMPLE0000FF is 100% Blue
SAMPLE008080 is 50% Green + 50% Blue
SAMPLE808080 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.