Creative Use of Color in Page Design

When designing a page, assess the overall use of color rather than focusing on color within a certain element. You should factor in the background color, the color of each graphic element, the color of the text, and the color of the links (both traversed and untraversed). There should be a unified color scheme established and all elements should support this scheme.

Color is an important element in helping to support your intent. Typically a WWW site has been established so that others will read or experience the content. The typical user of the WWW clicks from page to page without stopping long enough to appreciate the content of many of the pages traversed. Effective use of color on a page will encourage people to take a sec-ond look at your site whether or not the content is relevant to them.


Color - Too Much vs. Not Enough

We live in an age where we are bombarded with information. In cases of extreme overload, we use a mental filter to sort the useful information from the "junk mail". Advertisers have long realized the effectiveness of color to attract attention and entice you to read their literature. Companies also recognize the importance of using color to enhance the readability and professional appearance of their literature, from annual reports to presentation of market trends.

If everything on the Internet were plain text without color, as it was for many years, it would be difficult to distinguish pages from one another. Black and white pages with no variation in text size or graphics force us to stop and read the text to determine the usefulness of the material. There are benefits of having plain text documents. Obviously they take up less disk space, and thus transfer over the Internet much faster. There is no danger of the viewer being distracted by images and therefore the focus is entirely on the text. The content is compacted into a smaller space when you do not use graphics. There is a danger of using no color. People have come to expect color and graphics on a WWW page. It is often the determining factor as to whether the user stops long enough to absorb the content. Even a little splash of color on a text based page can help to enhance the material and its readability.

Too much color can be worse than not enough. After years of teaching computer graphics imaging, I have seen trends in color usage that parallel the introduction of other graphic technologies. When a student first discovers that the computer is able to put twenty different fonts on one page, a feeling of excitement entices them to try it. They continue to operate in this "excited" mode until they realize that the capabilities of the computer do not, in and of themselves, create good design. This same principle applies to filter usage in imaging programs and the use of color on the WWW. Because we are now able to put colorful background images on our pages, many people experiment with incorporating as many colors as possible. The background color should work well with the colors used in your graphics and text.

Limited Palette

Select a color scheme. This can consist of harmonious colors or contrasting colors, but intentionally limit the number of different colors you will use on your page and site. Make sure all of the elements work together to add a sense of color unity to your page. One solution is to select colors within the same range on the color wheel.

Complex Palette

There are a number of sites that, for various reasons have chosen to establish a palette that contains many colors. When working with many colors, it is important to recognize dominant colors and the relationship between the vari-ous colors. Once again, a good way to assess your usage of color is to stand back and view the page or pages from a distance. Which colors seem to jump out at you? Is there tension or visual conflict between the different colors used? Do all colors demand equal attention? The use of rainbow colors in a graphic or background typically destroys any attempts to create a unified palette. A series of photorealistic images using various colors should have some common color elements that tie them together.

Color Contrast (Background Images)

When deciding which colors to use and where to use them, it is important to consider the effect of the color on neighboring or superimposed elements. Commonly, an HTML designer will create a background image or use a background color without full consideration of its relationship to the text or graphics that will be placed upon it. In most cases, the background image should be subtle and not attract attention to itself at the expense of detracting from the content of the page. There should be adequate contrast between the background image and the text so that the latter is readable.

Proper contrast between background and foreground may be established by maximizing the value (dark and light) differences between the elements. When focusing on contrast, it is also important to consider color contrast. If the entire page were converted to greyscale, many of the greens and reds in your page would have the same value and become indistinguishable from each other. Yet, on the color page, red and green would appear to have high contrast in relationship to each other. Many color blind people are unable to distinguish between red and green so it is important to recognize the downfalls of using this type of color contrast in your design. Color is discussed more in depth in the section that deals with graphics.


To assist the viewer in interpreting the content and experiencing the events intended, it is important to use variation effectively. When variation is used to distinguish special items only, it is easy for the viewer to quickly browse the page and begin to understand the intent of the page. Newspapers use variation to give relative importance to the stories they contain by varying the font size of the captions. Variation can be used effectively with both text and image. For instance, Netscape, by default, varies the font style for a text link, and differentiates between a traversed link and an untraversed link. The designers of the browser realized that for practical purposes, it was necessary for people to know what to click on. Therefore, they applied graphic design principles to place relative importance on the hypertextual elements. Links arenít the only thing that should be given special distinction on a page. You will probably want to treat your captions differently than the body text, and distinguish important images from supplementary ones.

Page Hierarchy

When designing the structure of your site, it is important to realize that, while people do not have to begin with the first page, many of them do. Typically referred to as the home page, the top level page should contain an insight to the contents or intent of your HTML project. This page should be attractive in terms of design and should contain important information that conveys your intent.Typically we associate more importance to the items at the top of the page. Be careful to design your page so that it appears to have more information than what is contained in the first top of the page, if in fact it does.

Although most users will begin with the home page, you should not design your site under that assumption. It is quite common for people to send other people URLs of interesting WWW sites where the URL that is passed on may or may not be a pointer to your home page. A common mistake is to create buttons that say "Back to the Home Page". We cannot make the assumption that the viewer has ever been to our home page.

Previous page : Principles of Design and Page Layout

Next page : Creating Effective Graphics

Back to main page of Chapter 1