I''d like to describe some of the turns I went through in designing the color picker in the Webmaster''s Color Laboratory, circa July-September 1998.

I wanted to make the world''s best online color picker for designing color schemes. I had a vague idea of one day also printing a poster showing all 216 Web-safe colors, but the aim was first and foremost to make the best online color tool and make it free. This was hardly magnanimous; I wished to reach a lot of designers.

Here''s a visual tour of the tries I went through.

Paint Can Color Lab

The first bright idea was to draw a paint can with the center transparent, thinking an electronic color lab could benefit from real-world analogs. The center would be filled in by table cell background colors. Of course, even limiting color choices to 216 there would be way to many to display at once. Wouldn''t want to confuse the poor user. So one must naturally select colors iteratively, getting closer to the one you have in mind with a series of clicks. I thought each successive click would show the neighbors of the new color.

Take 1: Paint Can Star

This shows the Web-safe colors neighboring a darkish gray, #666666, shown in the center. I was thinking after one clicked on a paint can, that color would shift to the center and its neighbors would show up. I first discovered this arrangement playing with pennies on top of my bureau. I left them there proudly for weeks.

Gasp!  This color selector is missing all variations along the brightness scale. An especially bad thing as many times it''s useful to combine colors varying only in brightness. Darn, that doesn''t fit cleanly within this nice star shape. Oh well, utility must prevail.

Take 2: Paint Can Star plus Brightness Scale

Ok now the darkish gray "current color" shows up in two places, the center of the hue star and also in the brightness scale (lined up with the star''s center). Very nice, this way all the variations in brightness show up on the right. Hmm, wondering if other such variations might be useful.

Take 3: Paint Can Row

Now here are loads of variations on a weak reddish color, Web-safe #996666, which you can see as a row with the same color running roughly down the centerline. A flame-out along the lines of that famous hue variation control in Adobe. Photoshop.. The brightness scale is the third column from the left. Trouble is, you can''t see the trees for the forest. All kinds of garish colors are always in here that are nowhere close to the one picked. Iteratively homing in on the color you want would be very distracted by all this variation in your face. Besides it''s a very wide color picker.

Wonder if we can go back to the star idea and build upon that. Also, I think I was getting tired of the paint cans, which looked cute but kept the color samples small and didn''t allow them to touch for comparison.

Take 4: Table Cell Color Star

I started experimenting with table cell background colors. Here is the original color star with a brightness scale (part of one anyway). Now what if I expanded the choices. (More pennies please.)

Take 5: Bigger Star

About this point I discovered that a very big table like this, with hundreds of cells, give browsers quite some difficulty, several seconds to render or scroll. No matter, I could always use an image map instead.