Web Author's Guide
Color Advice

This page is an introduction to Color Theory, but anticipates some facts mentioned there. It also assumes that you know that there are only 212 Web-Safe Colors you can use, and have been warned about the hazards of the Windows Color Picker chart.

General Considerations

Beyond the question of what's available, and how it can be safely coded for your Web page, which are subjects that lend themselves to precise statement, there are some useful general rules of experience. Those rules are often violated, but usually with bad results. Our formulation of them is divided into five topics:

Area Effect / Backgrounds / Colors Per Se / Dark Context / Eye Contrasts

Area Effect. The "same" color looks darker on a large object than on a small one. The bigger the object, the more oppressive a dark color will appear. Walls need to be a tint of your theme color, not the color itself. You love a color on a favorite painting, but painting your whole house that color usually gives a monstrous result. Not only is the effect of the same color in large areas heavier, but the color value itself can appear different. A careful designer might compensate for the Area effect (though it may be hard to do within the list of Web-safe colors). Alternatively, if you want a "thematic" color to be recognizable throughout your site without fine-tuning, avoid displaying it on objects which differ greatly in size.

Backgrounds For Text. The effect of a surrounding white or other light background on colored text is to drain the text of its color. Colored text looks thinner, and (see the preceding note) may also appear a slightly different color, than the same color applied to areas. The desired color identity between text and object can be restored by putting the text in bold, which in effect makes the letters of the text into areas. But that treatment isn't always appropriate. Our suggestion is to avoid using any but the simplest and strongest colors (basic red FF0000; basic blue 0000FF) for consecutive text that you wish to highlight with color. Red and blue are both available as named colors from the Colors part of the Styles (or equivalent) menu in your Internet home page program. No other named colors on that list, and few enough unnamed colors on the full Color Tables, work well for the purpose. Bear in mind also that basic blue is the default color for hyperlinks on Internet pages. So if you have lots of links, you are already using lots of blue, and blue thus loses its distinctiveness as a highlighting signal. Red is pretty screamy in large quantities. We tend to go with the third or darker red option, maroon 990000. This is why.

Colors Per Se. The familiar rule is that "warm" colors (reds, oranges, browns) are cozy, whereas "cool" colors (greens, blues, purples) either repel or create a feeling of distance. The other way of saying this is that "warm" colors can be too energetic, whereas "cool" colors (especially blues) properly handled can give a restful impression. Also, however your personal tastes may run, pastels tend to remind people of the covers of romance novels, and thus to convey an air of unseriousness. And many people have a bad reaction to colors in the red-purple zone of the spectrum (including named Magenta on the color menu). Before adopting a thematic color for your scholarly web site, ask yourself whether you have ever seen it on the cover of a scholarly journal, or as the theme color of a university home page. If the answer is No (or Yes, but it looked icky), you should reconsider the whole matter.

Actors and stage professionals know, and respect, the characterization power of certain colored spotlights. Ponder, for instance, the technical color name "bastard yellow."

A further complication in color choice questions has to do with viewer screens. All of these are some shade of blue (probably chosen because of its "restful" quality). The lighter shades of blue let you imagine you are on a white page (the eye adjusts); the darker ones give a strongly blue cast. Color designs based on high-key (pale neutral) colors can look very sophisticated against a light blue (functionally white) screen, but will look simply awful against a more strongly blue screen. Our experiment with a vanilla-colored thematic element on this web site, years ago, because of this blue effect. Rather than have our sophisticated redesign appear vomititious to half the viewers in the world, we went back to stronger colors. The moral is that some finesses just don't work. Don't spend time on something subtle, without checking how it looks out there in the world.

Dark Context. Museums long ago found that a dark context can dramatically highlight a light colored object. But drama itself is wearisome if pressed too hard, or sustained too long. Notice, at your favorite museum, that the immediate background of the object (the case in which it is displayed), even in galleries with dark walls, tends to be light or neutral. The dark gallery highlights the case, but then it is the light case background (or the light mat of a framed picture) that suitably displays the object. The general rule is that light backgrounds are better. Light objects highlighted against dark backgrounds are wearing. Humans are day animals, and our visual apparatus wasn't set up for it. The work of Joseph Albers shows what distortions in perception arise when a light area is framed by a dark area.

Also, text in light colors on a dark background is extremely fatiguing for the eye to resolve (in print no less than on screen). That arrangement will work for a button or label, if the letters are thick enough. But it is strongly counterindicated for consecutive text. Many designers like light-on-dark because of its seeming impact. But it is a design error in all cases where it is expected that the text will be read.

Eye Contrasts. As noted in our more technical Color page, the eye "sees" more red contrasts than green contrasts, and to the eye, the tables in the HTML repertoire or any other color atlas are heavy on greens and stingy with reds (we here allude to a famous verse by Li Ching-jau). The only reds on any of the tables are those on the Red = FF table. Bear in mind, in using adjacent colors from the charts, that neighboring shades of green may look the same to the viewer, whereas all reds (always excepting those in the lower right corner of the table) will appear well contrasted.

In all honesty, we have to close on a sober note: Despite your best efforts, people can set their browsers to render colors (like the color of active links) any way they choose. Your design decisions will be simply overridden in those cases. The viewer who wishes to do so has the last word.

16 Dec 2001 / Contact The Project / Exit to Reference Page