HTML /CSS Pairwise Test of all 240 pairs of Colors

Test of all 240 pairs of HTML / CSS color text and background combinations.

Determine which HTML / CSS named-colors look good for text on which background named-colors and which look awful. Use for quick selection of appealing two-color, named-color schemes.

Authors

Written 2010 by Will Johnson for Fast Forward Technologies
Email Fast Forward Technologies at fft2001@aol.com
or post your comments for public view far below.
Creative Commons Attribution 3.0 License
fft2001
The Knol Self-Tweeter on the left, is designed to work only for an article's author.

Follow Fast Forward Technologies on Twitter!
or use my Knol Public activity feed

Buy your own Knol Self-Tweeter for only two dollars! I will email it to you, when I receive payment.
What the Knol Self-Twitter does exactly is explained at this link.

[Edit]
The W3C has defined only 16 HTML / CSS color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.  All of these color have simple names, and we're going to access them in the below tables by their names, not by a hex value.

Also check out my article Knol Color Test : What are my Choices? where I show many other colors that have wide browser support even though not defined by the W3C.

Here is a snippet from the code which does what I'm doing below:
<table  bgcolor=aqua><tr>
<td style="color: blue; text-align: center;">blue</td>
<td style="color: fuchsia; text-align: center;">fuchsia</td>
</tr></table>

Color is the color of the text, while bgcolor is the color of the background of the table cell.  Just copy these examples and choose whatever color you want.  The same colors that are used in the background, can also be used for the text itself.  I could have done that here, but it's easier to see the color if you have a large area of color, so I chose to make the entire box that color, so you could see it.

[Edit]
Aqua Background
black blue fuchsia gray green
lime maroon navy olive purple
red silver teal white yellow

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

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

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


[Edit]
Gray Background
aqua blue black fuchsia green
lime maroon navy olive purple
red silver teal white yellow

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

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

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

[Edit]
Navy Background
aqua blue black fuchsia gray
green lime maroon olive purple
red silver teal white yellow

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

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

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

[Edit]
Silver Background
aqua blue black fuchsia gray
green lime maroon navy olive
purple red teal white yellow

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

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

Yellow Background
aqua blue black fuchsia gray
green lime maroon navy olive
purple red silver teal white
[Edit]

Comments

Which combinations

Which combinations above do you think are pretty? Which are hideous? From each table I like black on aqua, while lime is unreadable. Lime on black is kinda neat, while navy disappears. With the blue background, most of them are awful, fuchsia is sort-of interesting. In the fuchsia table, black is nice, red and silver are unreadable.

In the grey table I like aqua, lime and red, while olive and teal are the worst. In the green table, teal, olive and gray can't be read; white, lime or yellow are the best choices. In the lime table, maroon or purple are interesting, while aqua, white and yellow are awful. In the maroon table, yellow looks to be the best; purple and olive are bad.

In the navy table, several look decent - aqua, red, lime, fuchsia and yellow are all possible good choices, while black, purple, green and teal are bad. In the olive table, yellow, white, lime are good; gray is unreadable, green and teal are bad. In the purple table, yellow or fuchsia are the best, while maroon and teal are the worst. In the red table, several good possibilities, the best probably blue, navy and yellow; the worst fuchsia, aqua and silver.

In the silver table, I like yellow, white, purple and maroon; while aqua and lime are the worst. In the teal background, aqua, white and yellow look interesting while gray, olive and green are unreadable. In the white table, black and navy are the best, while yellow is unreadable and silver is bad. In the yellow table, I like purple, blue and teal, while white is unreadable while lime and aqua are bad.

Anonymous - 25 Feb 2010