Virginia's HTML—Colors

©2005, Martin Rinehart html-intro-03.html

Let's add some color. So far you've got default black text on a default white background. In printing, color adds substantial costs, so we've learned to accept black and white. On the web, color's free, so we should never accept black and white.

First, though, we'll be using hexadecimal numbers to specify our colors, so that's our first topic.

Hexadecimal Numbers

Hexadecimal numbers, "hex" for short, are base 16 numbers. This table shows hex and decimal equivalents. It's just like decimal numbers, except that the base (the value of "10") is sixteen, not ten. We use the decimal digits through 9, then the letters "A" thru "F" for the digits ten, eleven, ... fifteen. Then we add a zero and start again: "10" is sixteen, "11" is seventeen, etc.

Hex 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 . . . FF

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 . . . 255

You can use either upper or lowercase letters for the digits "A" through "F".

PC Color Basics

Personal computers and the printers we commonly attach to them use three base colors—red, green and blue. The RGB value of a color is a specification of the amounts of red, green and blue. Each color value ranges from 0 (none) to FF (maximum). The three values are packed into a single number with a little trick. Here's how we'd pack three decimal numbers into one:

RR * 10000 =   RR0000
GG *   100 =     GG00
BB         = +     BB
              -------
	       RRGGBB

The same trick works for hex digits. The first two digits are red, the middle two are green and the last two are blue.

A hex number in HTML is preceded by the "#" sign. To get maximum green, and nothing else, you would specify #00FF00. To get white you max out everything: #FFFFFF. To get a pale blue, you'd max out the blue, but back off a little on the other two: #E0E0FF. The following table shows some common values.

#FFFFFF #FF0000 #00FF00 #0000FF #000000 #FFFF00 #FF00FF #00FFFF #404040 #808080 #C0C0C0 #E0E0FF

white red green blue black yellow magenta cyan near
black boring
gray lighter
gray light
blue

Let's consider some of these. The first eight use either the maximum amount of a color, #FF, or none of the color, #00.

White and black—everything or nothing(#FFFFFF or #000000)
Red, green and blue—max just one of the RGB trio (#FF0000, #00FF00 or #0000FF
Yellow, magenta, cyan—max two of the RGB trio (#FFFF00, #FF00FF or #00FFFF)
Shades of gray—equal amounts of all three (try some on your own!)

Other PC Colors

Actually, the colors above are all named and you don't need to specify them with hex numbers. You could use "#FFFFFF" or "white" to get white. But if you stuck to the named colors, you wouldn't have many choices. With hex colors you have just under 17 million choices.

For examples:

#F0F0F8—The blue-gray background of this page.
#F8F8F0—The beige background of the tables.

Page Background Color

The page background can be any color you specify. Using black can be dramatic. (It can also be annoying—never forget that the purpose of the website is to communicate.) Stick to white or light colors for most work. You set the color using the BGCOLOR attribute of the <BODY> tag, this way:

What color is #F8FCFF? That's near maximum red (F8), even nearer maximum green (FC) and absolutely maximum blue (FF). Here's virginia.html with that light blue body color.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

Now it's your turn. Set your own background color for virginia.html. Try different things: darker, lighter, more blue, more green. Get one that you like and then we'll go to work on the fonts.

Font Colors

If you want a truly ugly, bad-taste web page, a good idea is to use lots of different colors for the text. It will be hard to read, maddening as hell. But if you are sparing, some gentle nudging of text colors can brighten things up. Let's try changing the first "Virginia" in the <H1> heading from black to a darker blue. You do that this way:

. . . <FONT COLOR=#000044>Virginia</FONT>'s . . .

With that change, mine looks like this.

I like that effect. It's unobtrusive; almost subliminal. It emphasizes "Virginia" just slightly.

Virginia's Colors

Now it's your turn.

Add some color to the background — <BODY BGCOLOR=#??????>. Add some color to some of the text—<FONT COLOR=#??????>. . .</FONT>. Replace some of those stupid headings with actual headings and content and then upload to your site. I'm looking forward to seeing what you create.

Tomorrow I'll add a page about lists. These are lists.

This is an unordered list.

Shoes

Ships

Sealing wax

This is an ordered list:

The first step

The second step

The third step

Virginia's HTML—Colors

©2005, Martin Rinehart html-intro-03.html

Hexadecimal Numbers

PC Color Basics

Other PC Colors

Page Background Color

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

Font Colors

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

This is Virginia's first web page.

Virginia's Colors

Yesterday Tomorrow

Hex	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10	11	. . .	FF
Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	. . .	255

#FFFFFF	#FF0000	#00FF00	#0000FF	#000000	#FFFF00	#FF00FF	#00FFFF	#404040	#808080	#C0C0C0	#E0E0FF

white	red	green	blue	black	yellow	magenta	cyan	near black	boring gray	lighter gray	light blue