Written Feb 2010 by Will Johnson, wjhonson@aol.com
Creative Commons Attribution 3.0 License
[Edit]
Test of the 16 HTML and CSS color names defined by the W3C: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For the darker colors I wrote the text in white ink, for the lighter colors in black ink. All of these color have simple names, and we're accessing them in the below table by their names, not by a hex value. (Trying to compel Hex values or RGB values has got to be the all-time stupidest standards decision any body has ever promulgated. In the history of the Universe! So we're going to ignore it.)
Here is a snippet from the code which does what I'm doing below:
<td style="color: white; text-align: center;" bgcolor="blue">blue</td>
<td style="color: black; text-align: center;" bgcolor="fuchsia">fuchsia</td>
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]
Odd that they defined such colors as fuchsia which is a little obscure, without defining orange, or silver without defining gold. Also there is no brown, lavender, or pink. The point for this article, isn't that you can use thousands of different Hex values, to generate the colors, but which named colors exist, supported in Knol.
[Edit]
Let's try some other colors, which although not defined by the W3C, still enjoy general browser support. For the lighter colors I wrote in black ink, for the darker ones, in white ink. I'm not using every possible color in the table below, just the ones which I think it's likely we can all recognize and more importantly remember.
[Edit]
By default, when you make a table, Knol creates it with a border-width of 1 pixel like this:
<table style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1">
That's why you see the gray internal border lines above (at least I see them in Firefox). If you want to make the cells smoothly flowing without border lines you would edit the HTML and make the initial table definition just look like this
<table style="border-collapse: collapse;" width="80%" border="0" height="30px">
Here is the gay Rainbow Flag without any cell border lines, I had to force the height to be 30px as there is no text in the cells, and with no text and without that forced height, you just get a colored line, very thin. Maybe 1 px I guess?
[Edit]
Now go forward to the next article where I put every one of the 16 W3C colors on every one of the 16 backgrounds to see how they look in pairs! HTML /CSS Pairwise Test of all 240 pairs of Colors
Creative Commons Attribution 3.0 License
[Edit]
Test of the 16 HTML and CSS color names defined by the W3C: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For the darker colors I wrote the text in white ink, for the lighter colors in black ink. All of these color have simple names, and we're accessing them in the below table by their names, not by a hex value. (Trying to compel Hex values or RGB values has got to be the all-time stupidest standards decision any body has ever promulgated. In the history of the Universe! So we're going to ignore it.)
Here is a snippet from the code which does what I'm doing below:
<td style="color: white; text-align: center;" bgcolor="blue">blue</td>
<td style="color: black; text-align: center;" bgcolor="fuchsia">fuchsia</td>
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 | black | blue | fuchsia |
| gray | green | lime | maroon |
| navy | olive | purple | red |
| silver | teal | white | yellow |
Odd that they defined such colors as fuchsia which is a little obscure, without defining orange, or silver without defining gold. Also there is no brown, lavender, or pink. The point for this article, isn't that you can use thousands of different Hex values, to generate the colors, but which named colors exist, supported in Knol.
[Edit]
Let's try some other colors, which although not defined by the W3C, still enjoy general browser support. For the lighter colors I wrote in black ink, for the darker ones, in white ink. I'm not using every possible color in the table below, just the ones which I think it's likely we can all recognize and more importantly remember.
| Aquamarine | Beige | Brown | Chartreuse |
| Chocolate | Coral | Crimson | Cyan |
| DarkBlue | DarkGray | DarkGreen | DarkMagenta |
| DarkOrange | DarkRed | DarkSalmon | DarkSeaGreen |
| DarkSlateBlue | DarkSlateGray | DarkTurquoise | DarkViolet |
| DeepPink | FireBrick | ForestGreen | Gainsboro |
| Gold | GreenYellow | HotPink | Indigo |
| Ivory | Khaki | Lavender | LawnGreen |
| LightGrey | LightGreen | LightPink | LightYellow |
| Linen | Magenta | Orange | OrangeRed |
| PaleGreen | Pink | Plum | PowderBlue |
| Salmon | Sienna | SkyBlue | SlateBlue |
| Tan | Thistle | Turquoise | Violet |
| Wheat | WhiteSmoke | YellowGreen |
[Edit]
By default, when you make a table, Knol creates it with a border-width of 1 pixel like this:
<table style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1">
That's why you see the gray internal border lines above (at least I see them in Firefox). If you want to make the cells smoothly flowing without border lines you would edit the HTML and make the initial table definition just look like this
<table style="border-collapse: collapse;" width="80%" border="0" height="30px">
Here is the gay Rainbow Flag without any cell border lines, I had to force the height to be 30px as there is no text in the cells, and with no text and without that forced height, you just get a colored line, very thin. Maybe 1 px I guess?
[Edit]
Now go forward to the next article where I put every one of the 16 W3C colors on every one of the 16 backgrounds to see how they look in pairs! HTML /CSS Pairwise Test of all 240 pairs of Colors