VisiBone Swatch Collection Building a Better Color Picker
Article by Bob Stein for Web Page Design For Designers, www.wpdfd.com.
Default swatch collection for
Striking but incomplete.
|As explained in vivid detail on
the WPDFD palette pages, it's a good idea to
choose the colors for your web site from a special set of 216 universal browser-safe
colors. Originally defined by the folks at Netscape, this set of colors will give your
backgrounds, fonts, artwork, and even photographs, the best chance of looking right on all
the browsers, operating systems and color monitors out there in the wide web world. In
many graphics applications, colors can be chosen from a collection of samples called swatches,
also known as the color lookup table or CLUT.
The default swatch collection that comes with Adobe ImageReady has only 156 of the 216 web-safe colors. I discovered this when a graphics designer acquaintance of mine politely suggested there wasn't much need for my online color lab because most software has the web-safe palette built in, pointing to ImageReady as an example. Turns out he's 72% right. All of the most vivid or fully saturated colors are included in the factory-issue color picker, but many subtler shades are missing. Technically speaking, the missing colors are all those with HTML color codes made up of 33, 66, 99, CC, with no 00's nor FF's, such as CC6633, except for the grays, which are included.
Lynda Weinman has written several books on web colors and her swatch collection is ubiquitous, appearing even in Adobe Magazine. But it's in numerical order, which isn't much use to anyone but computer nerds. Try the Show Me The Browns Test: find two shades of brown that don't clash. Browns are subtle. Tasteful designers could use a hand here.
It was a series of miscommunications on the Adobe user-to-user forums that spurred me to action. (Sorry for not reprinting the messages, but I haven't heard back from the Adobe folks and, well, I'd rather lawyers stayed in their coffins. You can register and see it; topic 26 in the ImageReady forum.) I wanted a color picking tool that worked within Adobe software that had all the web-safe colors arranged symmetrically by hue, in line with the way humans perceive color. I got busy and hammered the arrangement I'd developed for a poster into this 16-column-wide grid. I hope you'll be able to make use of it when picking out your next great web site color scheme.
VisiBone.aco color swatches for Adobe software on PC's.
visibone.sit color swatches for Adobe software on the Mac, provided in Stuffit format to retain the resource fork (conversion courtesy Joe Gillespie, host of WPDFD).
Downloadable swatch collections for the GIMP in Linux
Conversion and instructions courtesy of Jeff Hoffman, in magnanimous Linux style.
Other Color Picking Techniques
|Another common trick is to use your software's eyedropper tool on an image that has the right colors. I made the image on the left for just that purpose. It's also used in the online color lab.|
|The Webmaster's Palette Poster is now available!. See the poster info and ordering page.|
Bob Stein is Chief Color Spelunker at VisiBone International Color Laboratories. He can be reached at firstname.lastname@example.org.
VisiBone site map: lab faq (lab help web colors adobe clut) codes (vaccc) links kudos poster home email@example.com