COLOR LIMITATIONS no longer need to be a problem when designing within the "web-safe" color palette. If you have been struggling with the severe restriction of a palette limited to 216 colors, this article will illustrate a method to create "hybrid colors", as described by Weinman and Heavin (1996), to achieve the results you need. If you aren't familiar with the compelling reasons for using the web-safe (also known as "browser-friendly") palette of colors, please read Susan Myrland's article in this encyclopedia entitled Web Page Design: GIF vs JPEG , particularly the section on Web palettes and dithering.

Let's say that you are a New England-based graphic artist hired to create a web site that illustrates the beauty of the Autumn leaves. You have carefully chosen a specific color of gold for your buttons, but the web-safe colors don't quite fit your needs. In the example at the right, the first two blocks are from the web-safe palette. The first is too yellow, and the second has a slightly greenish cast, perhaps not what you had in mind. But look what happens when you combine these exact same two colors on a pixel by pixel basis: the viewer's eye does the work of combining the colors!

It's a simple process to create hybrid colors manually. With a paint product such as Adobe Photoshop, first magnify the image to at least 8-10 times its normal size. Using a pencil tool, color every other pixel in the first row with your first color. Then, fill in the remaining pixels with your second color. 

 After you have filled in a large section, change your view to normal size. The individual pixels will no longer be visible.
If the size of the graphic is a concern, the pixels can be pasted in horizontal stripes, rather than a checkerboard. This allows more compression when the gif is saved.

Hybrid colors can also be used to create compatible colors for a page sidebar and background. In the next example, a background strip is composed of only two lines, using three different colors alternating two at a time. The sidebar was created by alternating burgundy and light yellow, while the main part of the background has the same light yellow alternating with white. This way, seemingly unrelated colors can look complementary.

Finally, if you have read this far, you'll probably want to try this on your own. There is a very helpful web site called that allows you to choose, view and download hybrid colors before you spend a lot of time creating them yourself. Enjoy!

Palettes, transparency and optimizing file size:

• Sun Microsystems' Guide to Web Style Technote #3. This site contains an excellent graphic on web-safe color tables.
• Creating Killer Web Sites: Design Tips
• Linda Weinman's Definitive Guide to Color on the Web
• Preparing Graphics for the Web
• Yale Style Manual
  

Layout and graphic design: 

• Web Page Design: Graphic Resources for Non-Artists
• Web Page Design: Types of Navigation
• Web Page Design: Layout Control 
  

Donna Mulcahy