COLORS SUPPORTED ON ALL PLATFORMS
This page is designed as an index to the "browser-safe" colors. If you already know what "browser-safe" colors are, and want to view samples of all 216 of them, you've come to the right place!
View the "browser-safe" colors on a white background
View the "browser-safe" colors on a black background
View the "browser-safe" colors on a gray background
If you don't know what "browser-safe" colors are, you've still come to the right place! Just read on for the inside details...
I'll begin my answer to this with a personal anecdote:
Like many a web designer out there, when I first created my home page, I decided to add some distinctive colors to it. So, I promptly went over to the InfiNet colors page, which has nice swatches of all sorts of different colors. I picked a few that looked nice, and stuck them in my page. But, my friends on other platforms told me that they looked horrible. I was puzzled, since they looked fine on my monitor.
It wasn't until a long time afterwards that I discovered that these colors that I picked were not "browser-safe." To put it simply, there are only 216 colors which are "browser-safe," meaning that they'll look the same no matter which browser or which platform you view them on. Any color which is not one of these 216 runs the risk of being (gasp!) dithered, which means that the color may not look originally as you intended. This may make your page unreadable, or just ugly.
For the technically inclined, these 216 colors are the colors for which the RGB values of each color are either 00, 33, 66, 99, CC, or FF (in hex). (In decimal, these values are 0, 51, 102, 153, 204, and 255, respectively.) So, for example, R=33 G=CC B=66 is a perfectly fine "browser-safe" color; R=47 G=CC B=99 is not.
The InfiNet page has become an incredibly popular resource, as near as I can tell, despite the fact that most of these colors (in fact, I think it may be all) are not browser-safe. So, as a public service, I said to myself, "Well, there are only 216 of these possible 'browser-safe' colors," and decided to wade through the rather tedious HTML coding. Thus, I bring you this result.
2. Does that mean I can't use all of the millions of possible colors I can see on my monitor?
I wouldn't recommend it. Sure, if you make sure they look fine on your millions-of-colors Windows machine running Netscape, you'll probably ensure that a healthy percentage of the Web can see your page as you intended. But, people like me who use Macs, people I know who use IE, or my friend with a screwed-up video card will not. At best, your page will just look slightly ugly; at worst, it'll be completely unreadable. I'll keep it simple (and bold): In your page, do not use colors which are not "browser-safe." Otherwise, you run the risk of everyone either laughing at you, or not being able to read your page.
3. What about the color names built in to Netscape 3.0/4.0 or IE 3.0/4.0?
(If you don't know what I'm talking about, visit the technical details section below.)
That's a pretty dicey proposition. It might seem simpler and safer to go with the names instead of the hexadecimal code, but I would advise web designers to stick to the hexadecimal. If people are using a browser which doesn't support these words, then your text may well come out unreadable, and in any case, you'll never quite be sure what more exotic words (like "aqua") mean to different browsers. I'll repeat myself: If you want to make sure that your colors show up right, use only the colors on the samples page.
4. I'm new to all of this color stuff. How do I use these colors?
For those unfamiliar with the HTML, since Netscape 1.1, HTML designers have had the ability to change the colors of five different elements on their web page. These are all controlled by the appropriate attribute of the <BODY> tag:
Color values are usually expressed in hexadecimal: #RRGGBB, where the first two digits denote the amount of red, using a scale from 00-FF hexadecimal (0-255), the second two the amount of green, and the third pair the amount of blue. Thus, the color with 96 (=60 hex) red, 255 (=FF hex) green, and 12 (=0C hex) blue would be written as #60FF0C. If you wanted to use this as your background color, you would write <BODY bgcolor=#60FF0C>.
Netscape 3.0 has also introduced some more features dealing with color. Specific bits of text can be colorized using the <FONT> tag. So, if I wanted to make this bit of text red (=#FF0000), I would use the tag (in fact, I did use the tag) <FONT color=#FF0000>. Furthermore, Netscape 3.0 also allows you to use words to denote colors. For example, I could also make text red by using the notation <FONT color=red>.
If you want to be even more confused, feel free to visit Netscape's official documentation on colors.
5. Can you offer me any design tips for these colors?
Only a few. Please do remember that making each word a different color looks awful. Other than that, just pick something which looks nice against your background. I've generously provided these color samples against a white background, a gray background, and a black background. If you want to view them against some other background, follow the instructions below.
6. How can I view these colors against some other background?
Simple enough. Just choose go to one of my sample pages, and save it to disk (using the appropriate command for your browser, making sure to save it as source, not text). Then edit the <BODY> tag. If you want to view it against a particular color, merely edit to read: <BODY bgcolor="mycolor">, where mycolor is the hex value for your desired color. If you want to view it against a particular gif or jpeg, edit it to read: <BODY background="mygraphic">, where mygraphic is the file name of your desired graphic. Then just load it back into your browser. Alternatively, you can just visit this site, which allows you to instantly view any of the colors against any of the other colors.
7. Where are some other sites I can visit to learn about this?