left-pointing arrow for navigating to previous page

HTML Tutorial: Colors

right-pointing arrow for navigating to next page

Do you remember those 16 official named colors?

aqua	black	blue	fuchsia	gray	green	lime	maroon
navy	olive	purple	red	silver	teal	white	yellow

It's hard to remember a list of anything that's 16 long. Also, if you memorize the list you'll be about 17 million short of the full variety you can choose. The bad news is that you'll need to understand hexadecimal numbers. My daughter stumbled on this one at first. So this is a slower-paced rewrite of the original tutorial.

Numbers Live Independently

If I give you an apple, you have one apple. If I give you another and then another, you will have three apples. Three is the number that is one more than two. The French would say trois but that's still good old three, one more than deux.

Numbers Have Names

Three, trois or whatever it's called, the number three is still one more than two.

Numbers Have Symbols

The Arabic numeral "3" stands for three. The Roman numeral "III" stood for three. The Arabic concept that you could use ten different symbols and recycle them endlessly to create an ever expanding set of numbers was totally brilliant. Once they invented the number we call "zero" and gave it a symbol, they were off to the races. (If you doubt the brilliance of this system, please work a single long division using Roman numerals.)

"10" Is Not Ten

What's that? Has your tutor gone mad? Not at all.

For this discussion, please read "10" as "one, zero." If we are using Arabic numerals in the customary ten-based system, "10" ("one, zero") stands for the number ten. (From here on, I'll use the English name as a stand-in for the number itself.) "10" ("one, zero") is a symbol. It stands for ten, sometimes.

Suppose We Want Base Sixteen

"10" ("one, zero") stands for ten in the number base ten. "100" ("one, zero, zero") stands for ten tens in the number base ten, and so on. But ten is not the only possible number base. It turns out that sixteen is much more useful for many things computer. "10" (still "one, zero") stands for sixteen when we use base-sixteen numbers.

OK, computer dude. But what symbols shall we use for ten through fifteen?

Perhaps unimaginative, but simple to remember, base sixteen (also known as "hexadecimal" numbering, or just "hex") uses the first six letters of the English alphabet. Here are the first numbers, starting from zero by English name, decimal symbol and hex symbol:

Number	zero	one	two	three	four	five	six	seven
Decimal symbol	0	1	2	3	4	5	6	7
Hex Symbol	0	1	2	3	4	5	6	7

Number	eight	nine	ten	eleven	twelve	thirteen	fourteen	fifteen
Decimal symbol	8	9	10	11	12	13	14	15
Hex Symbol	8	9	a	b	c	d	e	f

Number	sixteen	seventeen	eighteen	nineteen	twenty	twenty-one	twenty-two	twenty-three
Decimal symbol	16	17	18	19	20	21	22	23
Hex Symbol	10	11	12	13	14	15	16	17

Get the pattern? In decimal, you use ten symbols. When you get to ten, you start recycling those same symbols "10", "11", and so on. In hex you use sixteen symbols and start recycling at sixteen "10", "11", and so on.

And What Has This to Do With Colors?

Each pixel on your screen contains three colors: red, green and blue. Each color has an intensity that varies from none at all (zero) to full intensity (two hundred fifty-five). If you don't have a calculator handy, decimal "255" is hex "ff". (Some use capital letters "A" thru "F". HTML accepts either. Lowercase is easier to type.) So we'll specify the intensity of each color with two hex digits, from "00" thru "ff".

Here's the Important Thing!

Translating hex numbers to decimal won't help you pick colors! The maximum is "ff". If you set red, green and blue all to "ff" you get white. If you set them all to "00" you get black. If you set them all to a low number, say "40", you get a dark gray. Set them all to a high number, say "d0", you get a light gray. If your light gray is a wee bit too dark, try a higher number such as "d8". Too light? Try something in between, like "d4".

The Hex Triple

The RGB triple sets red, green and blue in a single number. To set a background color, you use a bgcolor attribute, this way:

<... bgcolor=#rrggbb>

Only you don't use those letters, you use hex digits. Do you want pure red? Set maximum red and no green or blue: ...bgcolor='#ff0000'>. (Lots of things support the bgcolor= attribute. You've used it to set the body background color to that lame silver.)

Simple Colors

The following table shows the combinations using either all or none of each color.

`#000000`	`#ff0000`	`#00ff00`	`#0000ff`	`#ffff00`	`#ff00ff`	`#00ffff`	`#ffffff`

Little kids love bright, primary colors like these. Doing a nursery? This is your palette.

Subtle Colors

I got the background color for this frame by experimenting. Starting with high red and green (f8) and not quite so high blue (f0), then changing them a bit at a time I got to one I liked: #fcf8f0. The background for these tables is a simple light blue: #f0f0ff (maximum blue, a bit less for red and green).

Here's a table where the page color morphs to the table color.

`#fcf8f0`	`#f9f6f4`	`#f6f4f8`	`#f3f2fc`	`#f0f0ff`

Study the colors one at a time. Red is dropping 3 at a time. Green is dropping two at a time. Blue is rising 4 at a time.

Do you see how I'm thinking? Hex f0f0ff is decimal 15,790,335 (or at least that's what my calculator tells me). I neither know nor care. Hex f0 is something in decimal, but to me its just some number near to, but less than maximum ff.

`Color Experiment`

Go back to index.html and change the background to this:

<body bgcolor='#f0f0f0'>

Then change those, one color at a time, and only a little at a time. Fiddle with it until you get a color you really like. When you're happy, change the other pages to use your happy color.

I like that color half way between this page and the table color. Here's my revised index.html.

Don't Assign White

The default background is white. Some users choose a different default background color. (I'm a soft blue/gray this week.) If you assign bgcolor='#ffffff' you'll be overriding my choice, which is rude. (Of course, if you have a specific requirement for white, as opposed to just a light background, then go for white. The French flag is blue, white and red—not blue, soft background and red.)

If you think playing with these effects is fun, you're right. If you want to do it yourself with tables, that comes next.

Tables! Colorful tables!