February 4, 1997 Color My World

Color theory? What's so hard about that? Yellow and orange make red, and that's it, right? Wrong. Color abuse is a serious problem in Web design today. Color is like fine wine...you must respect it, or it will ruin your evening.

We are able to hear a single tone. But we almost never (that is, without special devices) see a single color unconnected to or separate from other colors. Colors present themselves in continuous flux, constantly relating to changing neighbors and changing conditions.

As a consequence, this proves for the reading of color what Kandinsky often demanded for the reading of art: what counts is not the what, but the how.

Interactive of Color, Josef Albers, p. 5

OFFLINE: Interaction of Color
by Joseph Albers
Yale University, 1963, US$10.00

"1963? Gif Girl, waasup?" you may be asking. But it's true, color theory actually pre-dates the Web. Shocking.

Seriously, though, Joseph Albers' book is the classic study in color interaction and perception of color. While it may be a bit hard to digest on the first go around, it is well worth the effort. Albers explains that color is all about context. In fact, a color cannot exist outside of a context which deeply affects the way it is perceived. The book is full of cool optical color exercises you can do to test out his theorems. Some will blow your mind. Let's look at a couple of Albers' classic exercises. Be aware that Albers, for a number of reasons which he explains in the book, considers colored paper to be the best way to test these ideas. The results are visually more powerful than on the screen, but hopefully you'll get the idea.

Above: See the top bright yellow "X" and the bottom grayish "X"? They are the same color. How can that be? Because the color fields surrounding them affect the way that your eye perceives the color.

Albers also talks about the importance of understanding the spectrum of colors that a designer has at his or her disposal. One way to look at the color spectrum is with a color wheel:

When you place one color on a field of another, opposite, color -- like purple and yellow, for instance -- the contrast is so extreme that it creates a "vibrating boundary." This can be really neat for psychedelic art, but not so neat for Web design, as Gif Girl will demonstrate.

Say you choose a light green text color that's perfect for a page on gardening. You also pick a background color that's reddish brown, like dirt. Great -- you've got a design concept that ties into the theme of your page. So you check out the results when you mix the text color with the background.

Holy vibrations, Gif Girl! That text is about as legible as an M.D.'s handwriting. Why? Because the colors are so intensely different that your eye tries to make up for the jarring juxtaposition. You see how it seems like there's a third color in between the reddish brown and the green? Well, there ain't. It's an optical illusion, an example of Albers' "vibrating boundary". Try something a little closer to your green text color. Like a dark brown green (instead of the red tone -- note that red is opposite from green on the wheel).

Ahhh....now that, Gif Girl can read! By choosing a color closer to green on the color wheel, you've improved the legibility substantially. But be careful; if you choose a color that is too close to your text color in value and hue, there may not be enough contrast to read. It's a big balancing act!

A little respect for color can really enhance your pages. It can make them more effective: using appropriate colors for pages with certain themes or subjects enhances your message. It can make them more functional: call her crazy, but Gif Girl always thinks it's a positive thing when she can read a page. And it will create better-designed pages: a well-considered color scheme means you've put time and thought into your page!

Got any pages that you think do a particularly good job of using color? Send them to Gif Girl so she can add them to a future column on successful use of color on the Web!

NEXT TIME:
Limiting Yourself:
It's a good thing! Smaller image palettes make for smaller file sizes, and Gif Girl will show you how.