The address for this web page is: http://fishcaro.crosswinds.net/day_26_color_numbers.htm
On to the next lesson! Back to the COURSE SYLLABUS

26. USING NUMBERS TO REPRESENT COLORS

When you print a book, the colors of the pictures are the same for each and every person who buys the book. (Oh, when life was simple...)
When you create a web page, the colors that you intend your users to see may or may not be the colors they actually see. Sensitivity to this issue will help you to design better-looking web pages.
This lesson begins the study of color on the web, by talking about how numbers are used to represent colors.
If you're able to print these index cards in color, GREAT! Color printing will make them much more meaningful.

INDEX CARD #26:

COLOR ON THE WEB (26a)

How do computer monitors display colors? Computer monitors display colors by combining Red, Green, and Blue light: this is known as the RGB color system. Each color is matched with a number that specifies how much red, green, and blue it contains.
A 24-bit number is used in the RGB system.
(In base two, a "0" or "1" is referred to as a bit. Thus, "24-bit" can be loosely interpreted as a base two number that uses 24 digits.)
The first 8 bits tell how much red the number contains; the next 8 are for green; the last 8 are for blue. RGB COLOR: RRRRRRRRGGGGGGGGBBBBBBBB (binary) In this way, 2²⁴ = 16,777,216 different colors can be specified. (WOW!)
Using the binary name for each number is a bit unwieldy, so most people use the hexadecimal representation instead (use the "group-by-fours" technique):

RGB COLOR: #RRGGBB (hexadecimal) (Here, R, G, B can be: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)

MORE ON COLORS (26b)

In each group (RR or GG or BB), 00 represents a total absence of that color, and FF represents a total presence of that color. #FF0000 is red. #00FF00 is green. #0000FF is blue.
#000000 is black. #FFFFFF is white.

Combining equal amounts of red and blue gives purple:

#330033 is dim purple. #990099 is medium purple. #FF00FF is brilliant purple.

Lots of colors have names, as well as numbers. Be careful, though: not all color names are supported by all browsers. The table on pages 79–82 of the Weasel Book lists the named colors.

Here's a word that shows up a lot when you start investigating color on the web:

What does "dithering" mean? To "dither" means to mix pixels of available colors in different dot patterns, to create the illusion of a new color or shade. Some samples are available in Worksheet #26.

Printable version of Index Card 26a

Printable version of Index Card 26b

WORKSHEET #26:

(W26.1) There's a wonderful web site where you can try out various color combinations, and see the corresponding hexadecimal codes. Visit and play around a bit! http://www.wire-man.com/paletteman/ (this link is no longer valid)
(W26.2) You can see samples of what all the named colors look like on your machine. Go to the web page for this book and click on "Color Names" in the left-hand margin: http://www.oreilly.com/catalog/wdnut/
(W26.3) Read about dithering at: http://webopedia.internet.com/TERM/d/dithering.html Here's a before-and-after-dithering example: http://w3.tyenet.com/mbabcock/gfx.dithering.html (this link is no longer valid)

ASSIGNMENT #26:

(A26.1) Please read pages 28–30 (up to "Gamma") and pages 75–84 (from "Specifying Color in HTML" up to "Character Entities") in the Weasel Book.