Color Pickers Page

It is easy use color in visual displays if you only want to distinguish among a few unordered categories--- Treatments A, or B, or Control; Political party: Republican, Democrat, Other, etc. In these cases, choose colors which are highly discriminable, and (hopefully) will also be discriminable if reproduced in black and white.

Color is much more difficult to use in practice to represent a set of ordered categories (or a continuous variable made discrete), or a bipolar scale (extremely support --> extremely oppose; residuals: ++++ to ----). Ah, and what if you want to encode two variables together using color?

Computer software (X-windows, HTML, SAS, PhotoShop, etc.) offers a variety of ways to choose colors, but most are based on the color models RGB, CMYK, Pantone, etc. which have more to do with how color is produced than how it is perceived.

This page illustrates some Good and Bad designs for Color Pickers, an interesting topic in information design in itself. See also, Cynthia Brewer's online ``ColorBrewer''.

Good Designs

Picture	Words
	Victor Engel's Netscape (6x6x6) Color Palette Map Full size (497 x 135) [11k] Victor Engel's Netscape (6x6x6) Color Palette Map is a JavaScript page to aid selection of colors in an HTML document. It contains the best design I have seen for displaying the 6 x 6 x 6 set of colors in the Netscape color palette. The color chips are hexagonal cells, arranged in two main grids to show the graduations from black to color at the left, and from white to color at the right. The display is highly dynamic, with fields showing the R, G, B codes in Hex, Decimal, and percent.
	NextStep Color Picker Full size (196 x 302) [15k] Some years ago, the NextStep operating system for NeXT computers offered the most advanced color picker I have ever seen. It was built into the operating system, so all applications use exactly the same color panel. When Pantone colors were added in one release, all applications automatically had the new facility! With the magnifying glass at the top, you can drag a color from any application to the color well. The row of buttons below provide color selection from a color wheel (shown), RGB values, scene-scape values, or Pantone. Once you select a color, you just drag it back to any application window. I've dragged a few color chips to the bottom row, where they are saved, for use in any application. See ColorPic for a freeware Windows program which is similar, but less capable.

Picture

Words

Victor Engel's Netscape (6x6x6) Color Palette Map Full size (497 x 135) [11k]

Victor Engel's Netscape (6x6x6) Color Palette Map is a JavaScript page to aid selection of colors in an HTML document. It contains the best design I have seen for displaying the 6 x 6 x 6 set of colors in the Netscape color palette. The color chips are hexagonal cells, arranged in two main grids to show the graduations from black to color at the left, and from white to color at the right.

The display is highly dynamic, with fields showing the R, G, B codes in Hex, Decimal, and percent.

NextStep Color Picker Full size (196 x 302) [15k]

Some years ago, the NextStep operating system for NeXT computers offered the most advanced color picker I have ever seen. It was built into the operating system, so all applications use exactly the same color panel. When Pantone colors were added in one release, all applications automatically had the new facility!

With the magnifying glass at the top, you can drag a color from any application to the color well. The row of buttons below provide color selection from a color wheel (shown), RGB values, scene-scape values, or Pantone. Once you select a color, you just drag it back to any application window.

I've dragged a few color chips to the bottom row, where they are saved, for use in any application. See ColorPic for a freeware Windows program which is similar, but less capable.

Bad Designs

Picture	Words
	KillerSite's NetScape Color Cube Full size (497 x 135) [11k] KillerSite's NetScape Color Cube presents this image of the 216 colors that the NetScape browser uses in its color palette, with instructions on how to load it into Photoshop's color picker. These colors are defined on the faces of a 6 x 6 x 6 color cube. Unfortunately, unfolding the cube as shown here gives a less-than-useful display.
	Web Design Group's Color Table Full size (497 x 135) [11k] Web Design Group presents a cgi script, which provides color table giving color names and RGB Color values (in Hex), just in case you want to say it in aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, or even white, and yellow. What makes this a terrible design is that: (a) color names are arranged alphabetically in a table. (b) color names are printed on a white background, regardless of lightness, Hex codes are printed in white on a colored background, regardless of lightness.

Picture

Words

KillerSite's NetScape Color Cube Full size (497 x 135) [11k]

KillerSite's NetScape Color Cube presents this image of the 216 colors that the NetScape browser uses in its color palette, with instructions on how to load it into Photoshop's color picker.

These colors are defined on the faces of a 6 x 6 x 6 color cube. Unfortunately, unfolding the cube as shown here gives a less-than-useful display.

Web Design Group's Color Table Full size (497 x 135) [11k]

Web Design Group presents a cgi script, which provides color table giving color names and RGB Color values (in Hex), just in case you want to say it in aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, or even white, and yellow.

What makes this a terrible design is that:
(a) color names are arranged alphabetically in a table.
(b) color names are printed on a white background, regardless of lightness, Hex codes are printed in white on a colored background, regardless of lightness.