BEST EVER: Browser-Safe Color Palette

Not so much nowadays, but years ago web designers generally tried to stick to the 216 so-called "browser-safe" colors. The idea was to get color constancy across all computer/browser platforms.

Naming these "safe" colors involved a limited set of hexadecimal digits -- 3, 6, 9, C and F -- paired together to represent increasing intensities of Red, Green, and Blue on the monitor. For instance, to get pure red you could specify "#FF0000" in hex, or "RGB(255,0,0)" or even "Red" in English. However, for red with a touch more purple, there was no commonly agreed-upon color name, so you'd have to say, e.g., "#FF0033."

Many folks came up with more or less "logical" arrangements of these 216 browser- or "web safe" colors. Most of them annoying. What you wanted to see were all the related colors together in progression of hues, values and chromas. Light to dark, and from ROY G. to BIV, rainbow-wise, right?

I have no idea why, but to the best of my knowledge, nobody else has ever come up with the arrangement you see above. I created it for my own benefit a long time ago and over the years it's served me well. Mia culpa for not publishing it sooner, I suppose.

In any case, to create it, I began with the "hex" data values for all the colors. And -- go figure -- they all fell nicely into place on a hexagonal grid -- with a few exceptions. The finesse comes in dealing those few that don't. The outliers are clearly related to colors inside the "nice" area, and would also arrange nicely if only they could float into the third dimension. What soon becomes evident is that you're trying to present as a flat chart something that is actually a color ball. (Yes, yes, CIE and Munsell solids, blah, etc. blah.)

I've fiddled with it a lot, and it can't be easily done. Hence all those objectionable alternatives out there. However, the result above is -- IMHO -- the least annoying and most useful arrangement possible.

I suppose if enough requests come in, I could put up my Adobe Illustrator-based interactive version that lets you turn labels, grid-lines, and color groups, etc. on and off. I also have a pure CSS version that works fine in Firefox and Safari. But, since most of the world is under the standards-busting thumb of a certain Evil Empire, I didn't want to be bothered with complaints from the hopelessly benighted.

No comments: