Module 6: HTML colors
What are HTML colors?
There are three ways to specify color values:
• Six-digit hexadecimal values
• Three-digit hexadecimal values
• Color names
Hexadecimal refers to a number system based on the number sixteen. (Decimal, on the other
hand, refers to a base-ten number system. Binary is a base-two number system.)
Since we only have 10 numeric digits to use, we resort to letters to specify the digits 10-15.
Digital Binary Hexadecimal
0 0 0
1 1 1
2 10 2
3 11 3
4 100 4
5 101 5
6 110 6
7 111 7
8 1000 8
9 1001 9
10 1010 A (or a)
11 1011 B (or b)
12 1100 C (or c)
13 1101 D (or d)
14 1110 E (or e)
15 1111 F (or f)
16 10000 10
Notice how “16” in hexadecimal is “10”. However, “2” in binary is “10”. This means you must
know which number system you are using before you can assume you know what a number
means. Chances are, unless you are a scientist, mathematician, engineer, designer or another
professional or researcher that uses a lot of math, you've always assumed “10” in the decimal
HTML colors use hexadecimal. Since you can use up to 6 hexadecimal digits, you get a total
number of possible colors equal to:
(16 x 16) x (16 x 16) x (16 x 16) = 16^6 = 256 x 256 x 256 = 256^3 = 16,777,216 colors
However, not every browser has a web palette of 16 million colors. In fact, many older browsers
only have a web palette of 216 colors, meaning other colors are approximated by mixing together
two or more of the 216 colors available to the browser. The mixing of colors is called dithering
and sometimes the result is less than desirable, and for a long time, designer tried to limit their
use of color to the 216 web-safe colors.
However, many newer browsers are not thusly limited, and can richly display up to 16 million
colors. Many designers have abandoned the web-safe colors, whereas other still use it so older
browsers still display attractive colors, as intended.
For a list of web-safe colors, view <http://www.w3schools.com/html/html_colors.asp>. I will not
limit your use to the 216 web-safe colors, and I will leave it as an exercise of your choice to
decide whether or not you want to stick to the web-safe palette.
What does the six-digit value mean?
The six-digit number actually represents RRGGBB, where RR is the range (00 to FF) of red, GG
is the range (00 to FF) of green, and BB is the range (00 to FF) of blue.
So, what does “#FF0000” mean? Red. What about “#00FF00”? Green. And “#0000FF”? Blue.
Every other number is a combination of the above.
What do you think “#000000” and “#FFFFFF” mean? Since black is the absence of color,
“#000000” is black. Since white is a combination of all primary colors, “#FFFFFF” is white.
You need to remember that the value is #RRGGBB, but you probably won't memorize many
colors, besides the ones you most frequently use. But you should know (memorize or be able to
derive) the five colors I just introduced.
How can I use these colors?
You can use it directly in the HTML using old attributes. We will go over a few, but you might
have already seen <font color=”#FF0000”>...</font> or <body bgcolor=”#D7D7D7”>...</body>.
In the future, we will limit colors to CSS.
Frequently, colors are used with fonts, backgrounds, and borders, though many other options