Color: How it is Coded in HTML

Module D06c

 

Contents

Twenty-Four Bit Color

 

Basic Computer Colors

Computer screens, like TV sets, combine 3 primary colors to get all the colors of the rainbow: Red, Green, and Blue. This is called the RGB system. [Figure 1]

The original, and simplest system for storing colors on computers, uses one bit (0 or 1 memory location) for each of the three colors. Each pixel (spot on the screen) was represented by three bits in the computer's memory. This allowed the computer to show each of the three colors, plus black (turning them all off), white (turning them all on) or any combination of two colors (yellow, cyan, and magenta) for a total of 2^3 = 8 colors.

[Figure 2]

Full Computer Colors

Currently, computers use eight bits for each primary color. This makes it possible to represent millions of colors - which is important if we want photographs to look real. What this means is:

  • There are 256 shades of red
  • There are 256 shades of green
  • There are 256 shades of blue
  • Each pair of colors can be combined in 256 x 256 = 65,536 ways. That is,
    • red and green can be combined in 65,536 ways
    • red and blue can be combined in 65,536 ways
    • blue and green can be combined in 65,536 ways
  • Combining all three primary colors, we get 256 x 256 x 256 = 16,777,216 possible color combinations.

[Figure 3]

Just what every kid wants - a box of 16,777,216 crayons!

Of course with so many color to use, we have to find some reasonable way to handle them all. That's what this module is about: using hexadecimal notation is the most reasonable way to handle all those colors if you have to communicate with the computer.

Hexadecimal?!? But WHY???

 

Hexadecimal Notation

 

Why Hex?

People around the world - almost all of us - use decimal numbers, based on the number 10 - probably because we learn to count on our ten fingers.

Computers around the world - almost all of them - use binary numbers, based on the number 2 - because it's much simpler to build computers that way.

So why do people who work with computers, including graphic artists, need to know how to represent colors using base 16 "hexadecimal" numbers???

Because the hexadecimal system offers the most practical fit with the way computers store numbers!

  • Binary notation (using only 0 and 1) is the most exact, but it's very long. For example, to represent the bright purple-pink known as magenta, the binary notation is 111111110000000011111111. Notice the pattern: eight 1s, eight 0s, and eight 1s. That pattern carries a meaning we don't want to lose: each group of eight represents a byte, and with colors each byte represents one of the three primary colors.
  • Decimal notation (the system we humans use every day), the number for magenta is 16711935. This is shorter than binary, but still pretty long. More important, it loses the pattern you can see in binary.
  • Hexadecimal notation for this color is FF00FF: shorter than either of the other two, and it preserves the pattern.

So how does hexadecimal notation work?

Counting in Hex

Every number system starts with zero and works its way up to the "base" less one. This table shows number systems from two to seventeen, plus twenty. The number systems we're most concerned with are two, ten, and sixteen - those are shown in bold.
Base:
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thir-teen
four-teen
fif-teen
six-teen
seven-teen
twenty
zero
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
1
1
one
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
two
10
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
three
11
10
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
four
100
11
10
4
4
4
4
4
4
4
4
4
4
4
4
4
4
five
101
12
11
10
5
5
5
5
5
5
5
5
5
5
5
5
5
six
110
 20
12
11
10
6
6
6
6
6
6
6
6
6
6
6
6
seven
111
 21
13
12
11
10
7
7
7
7
7
7
7
7
7
7
7
eight
1000
 22 20
13
12
11
10
8
8
8
8
8
8
8
8
8
8
nine
1001
 100 21
14
13
12
11
10
9
9
9
9
9
9
9
9
9
ten
1010
 101 22 20
14
13
12
11
10
A
A
A
A
A
A
A
A
eleven
1011
 102 23 21
15
14
13
12
11
10
B
B
B
B
B
B
B
twelve
1100
 120 30 22 20
15
14
13
12
11
10
C
C
C
C
C
C
thirteen
1101
 121 31 23 21
16
15
14
13
12
11
10
D
D
D
D
D
fourteen
1110
 122 32 24 22 20
16
15
14
13
12
11
10
E
E
E
E
fifteen
1111
 200 33 30 23 21
17
16
15
14
13
12
11
10
F
F
F
sixteen
10000
 201 40 31 24 22 20 17
16
15
14
13
12
11
10
G
G
seventeen
10001
 202 41 32 25 23 21 18
17
16
15
14
13
12
11
10
H
eighteen
10010
 210 42 33
30
 24 22 20
18
17
16
15
14
13
12
11
I
nineteen
10011
 211 43
34
31
 25 23 21
19
18
17
16
15
14
13
12
J
twenty
10100
 220 100
40
32
 26 24 22
20
19
18
17
16
15
14
13
10
   

Can you see the pattern?

  • Every number system starts with 0 and 1
  • Each number system is allowed only enough digits to get up to its base minus one
  • All number systems draw from the same set of digit symbols. If there aren't enough "traditional" numeric symbols for a particular number system, letters of the alphabet are used instead:
    0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • Every time a number system reaches its base, it adds another column to the left. The value of that column is determined by multiplying it by the number base once for each column to its right.
  • The base number is always represented with a 1 followed by a 0. (It looks like 10, but its value is only "ten" in base ten!)

Hexadecimal Notation for Colors

 

How Hex Notation Works with Colors

Since colors on the Web are shown with 24

Web-Safe Colors

 

Practice with Color Dials

Here is a set of dials that lets you adjust colors by turning them. Experiment with them until you get a feeling for how the system works.

[Java applet goes here]

Topic 1

 

Topic 1 material goes here...
 
 

Audience

 
This is for people who are familiar with how computers store colors (see module D01d), and who want to know about the color codes used in HTML and many graphics programs for representing 24-bit color. 
 

Objectives 

When you successfully complete this lesson, you will be able to... 

  1. Explain how colors are stored using the 24-bit system;
  2. List the numbers from zero to sixteen in hexadecimal;
  3. Identify primary and secondary colors in hexadecimal notation;
  4. Identify hexadecimal codes that represent "Web-safe" colors;
  5. Estimate the hue, saturation, and value of colors represented by hexadecimal codes.

About this Document 

Module D06c: Color - How it is Coded in Hexadecimal

This document is part of a modular instruction series in Computer Information Systems. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes: INP 152

Author:
Laurence J. Krieg
Institution:

Internet Professional Department, Washtenaw Community College
History:
Original: June, 2002
This version posted [an error occurred while processing this directive]
Copyright:
Copyright © 2002, Laurence J. Krieg, Washtenaw Community College.
Instructors: You may point to this file in your Web-based materials.  
Students: you may make a copy for your personal use.  
All other uses: contact the author, Laurence J. Krieg for permission.