“And this just in...”

Thanks to a wonderful client, I've recently had a great time doing a printed brochure and accompanying website update for Chateau Hair Designs. Here's a quick summary:

New BROCHURE   New WEBSITE

Revised, redesigned a new printed BROCHURE about services and prices, integrating look and feel elements from new storefront signage into a tri-fold layout Revised, redesigned a new WEBSITE from legacy site materials to match printed brochure, including look and feel Upgraded website HTML and CSS to full standards compliance*, including a footer link for live verification Added CSS rollover effects to provide some additional details on selected items Integrated a new BLOG at Blogger.com with the client's site, overriding Blogger elements and styles to preserve that same consistent look and feel Enhanced photos to add "watermarks" where appropriate, and improve web appearance overall Integrated a new Web GALLERY at Picasa.com with the client's new blog Vetted additions and changes with multiple browsers, on multiple platforms Provided a private, "shadow" site and blog to allow non-disruptive preparation and testing of future updates Preserved legacy information by keeping the entire previous version of the site available on demand through a footer link * Unfortunately, it's common practice for public hosting agency web servers to insert additional code, such as ads, which won't pass standards validation. Oh, well... At least we do our part!

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.