internet.com
Developer's Forum
Magazines

webreference.com

Java Boutique

Search Engine Watch

PC Webopedia

The Web Developer's Virtual Library


Design Diary

Colors up the Wazoo: Hybrid Color by DitherBox

by Heather Champ

What Web designer hasn't lamented the limited Internet-safe color palette--with only 216 colors? I was once asked, quite innocently, that if designers limited themselves to such a restricted palette, wouldn't the Web look the same?

Just because we're limited to 216 colors doesn't mean that we have to use them all--all at the same time. A site's color scheme limited to two or three colors, which sets the tone of the site, is one of the most important design considerations that will be made during the development period. A little color theory can go a long way in ensuring that the overall look and feel will complement the content of the site.

While there are a vast array of possible color schemes based on the 216, the colors themselves are not the best starting point. They are limited in hue and value with a greater number of more "pure," almost supersaturated, bright colors--very few muddy or dirty colors, which some designers prefer. Additionally, there are very few pale colors, which are a more suitable background color choice for text-rich documents.

Who chose these colors anyway? It certainly wasn't a designer. But relief may be at hand.

Have we been freed from the tyranny of the 216?
Lynda Weinman and Bruce Heavin first broached the subject of Hybrid color late last year with the publication of "Coloring Web Graphics: The Definitive Guide Resource for Color on the Web".

By creating small GIFs with 2 or 4 single pixels of Internet-safe colors placed adjacent to one another, it's possible to trick the user's eye in such a way that a third color is created. Until now it was a rather tedious, fiddly operation: creating, indexing, and then testing to create a field large enough to ensure a pleasing result.

Enter DitherBox
RDG Tools has released DitherBox (NB: This site managed to crash Netscape 3.01 for the Mac and Netscape Communicator for the PC. It may work on other combinations but I gave up. Internet Explorer seems to be the browser of choice for this app), a new plug-in for Adobe Photoshop that uses a proprietary system to create Hybrid colors.

The three main features of DitherBox are Automatic Color Translation, Real-Time Experimentation, and Color Collections.

Ditherbox examples

Automatic Color Translation is a quick and accurate way to convert any RGB color, including the conversion of Pantone color equivalents into Hybrid colors. Real-Time Experimentation speeds up the entire design process by immediately displaying the result of the color specification in a preview window, with a possible 64 colors in an 8 x 8 pixel grid. Color Collections enables the Hybrid colors to be saved in reusable libraries that can be named, edited, and shared.

Don't let the ease of creation overwhelm color choices. Hybrid colors work best when using colors that are similar to one another. It's less convincing when colors are further apart in value and hue; the final result can have a rather crunchy appearance.

And while DitherBox may save time in creating Hybrid colors, extra time may be required when an image is to be "transparentized" over a Hybrid background. DitherBox's FAQs and Tips document has an image-based demo on how to deal with this situation.

The Photoshop plugin is available now for the Mac, with a Windows 95 version coming soon (e-mail support@ditherbox.com to register for a free Windows 95 demo when it becomes available). The Free Trial version of DitherBox for the Mac does everything except "Fill."

So when someone tells you to quit dithering, you can give them a URL!

Past installments of Design Diary

http://www.internet.com/
Web Developer® Home Over a dozen topics in detail Live Chat Downloads Book and Product Reviews Threaded Discussions How-To/Articles/Links Developer Daily News Subscribe Search Corporate Information Advertise Events Publications internet.com Home