Export (0) Print
Expand All
Expand Minimize

Scheming in Color

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Robert Hess
Microsoft Corporation

September 11, 2000

Contents

Starting a Scheme
A Tool to Help

In my last few articles, I've discussed how paying attention to color usage on your Web page is important. Based on some of the questions and requests I've gotten, it appears that some of you would like to see how this information can be used to implement a color scheme in your site design. So this month, I'm going to provide an introduction to color schemes, and how you can work toward pulling something together that can help your pages take the best advantage of the wide variety of colors available.

For the sake of this discussion, it is first necessary to provide a visual template that we can use for comparing various color schemes. While there are countless ways to structure your Web pages, I've chosen a relatively standard layout with enough components to allow some interesting and useful color combinations.

Bb263949.layout(en-us,VS.85).gif

Our imaginary page will be made up of the following components:

  • Page Content
  • Page Title
  • Navigation Menu
  • Sidebar
  • Footer

In deciding the possible ways to use color on a page such as this, you first need to think about the different levels of importance that each area has to the user. Then, using some of the information about color that I've provided in my earlier articles, you can try to define a color scheme that properly accentuates the various parts of the page.

Let's start out with the assumption that the user will likely be most interested in the page content. We want to make this as easy to read as possible. Perhaps least interesting to the user will be the information in the footer. The Navigation Menu is important, but only so that the user can look to it for clear information about how to go somewhere else on the site. And the page title should be slightly separated from the page itself, as a "You are here" statement. Using these ideas, let's try to devise a gray-scale color scheme for our imaginary site.

Click to view larger image (6.23K)

Bb263949.grayscale(en-us,VS.85).gif

Page Content: Being most important, this should be tuned for maximum readability. This means that the background should be very light, and the text should be very dark, with high contrast. The obvious choice here is black text on a white background.

Page Title: This area should also have high contrast, so users can readily see where they are on the site. The title will often have a different "voice" than the rest of the page, which means that it might use a significantly different font face or a very different color combination from the page content. One easy way to do this is to reverse the colors used on the page content; while this doesn't always work well, in this case, white text on a black background is the perfect choice.

Navigation Menu: The menu shouldn't call too much attention to itself. While it is important for the user, it shouldn't compete with the page content. I will often use a darker color for the menu background than I would ever consider using for the page content background, and rely on high color contrast, sharp graphical elements, or a unique font face to properly keep the purpose of the page content and the menu separate. For this example, let's go with black text on a gray background. Any text within the menu area that can't be clicked, such as copyright information, doesn't require the same degree of visibility, so we can set this to dark gray.

Sidebar: While not used on all pages, a sidebar is a useful way to display additional information. It should be clearly apart from flow of the page content, but it also needs to be easy to read. That means it should also use a light-colored background, dark-colored text, and enough (and appropriate) contrast for easy reading. If we didn't want to stick with a gray-scale scheme, we might have chosen a very light blue or yellow for this; instead we can use a silver background with black text.

Footer: Being the least important, this information should be readable without screaming at the audience. Choose colors with medium contrast, but be sure that they are still pleasing to the eye. There shouldn't be anything on your page that is difficult for the reader to consume. For this, we'll use gray text on a silver background.

See, that wasn't so hard, was it?

Starting a Scheme

The process for arriving at your own color scheme is relatively straightforward. You start by selecting a set of colors that you think might be appropriate to the overall design. You could select colors from your corporate logo, from some key graphics that you plan to display, or that you simply find refreshing or relaxing to use.

For a quick example, I worked up a color scheme that presents the notion of fall. I started by identifying a handful of colors I thought would work. This was as simple as finding a picture on some site that had some fall leaves on it, and then pulling that into an image editing tool and selecting out of it a set of representative colors. (I modified the selection somewhat so that I could use colors from the browser-safe palette.)

Bb263949.fallcolorscheme(en-us,VS.85).gif

I then used these colors to test some ways of incorporating the set into my overall page layout, until I came up with something that I thought looked appealing.

Click to view larger image (6.33K)

Bb263949.fallcolors(en-us,VS.85).gif

I chose to use darker colors for the top title region (#CC3333) and bottom footer region (#CC6633). This created strong boundaries, inside which the page could sit. I used a medium gold color for the background of the navigation menu (#FFCC00) and then I repeated the dark color from the title background for the menu text, as well as for the headline text in the page content area.

I prefer the straightforward simplicity of black text on a white background for the major page content, so I used that here. Finally, I chose a fun shade of yellow for the sidebar background (#FFFF00), with the dark color from the footer for its title text.

By setting the navigation menu's background to a softer color, I kept it from fighting with the main content area, and from drawing the user's eyes away. Perhaps the sidebar color is a bit on the strong side. If overly large sidebars were necessary, it would probably be a good idea to soften this down a lot—even if it meant using a color that might not be available to users in 256-color mode.

In last month's article, I presented an interactive example of the same image rendered in a few different color schemes. Let's apply a few of those same basic color schemes to our visual template. In some cases, I've toned up and down the saturation of the colors to assist in providing a good contrast—but overall, I've stayed true to the initially selected colors:

Click each image to view a larger version.

Small analogous-colors graphic
Analogous Color
Bb263949.iconAnalogous(en-us,VS.85).gif
Small cool-colors graphic
Cool Colors
Bb263949.iconCool(en-us,VS.85).gif
Small warm-colors graphic
Warm Colors
Bb263949.iconWarm(en-us,VS.85).gif
Small monochromatic-blue graphic
Monochromatic Blue

Bb263949.iconMonochrome(en-us,VS.85).gif
You can see where I used a color background for the "Analogous" scheme, and how even in this small thumbnail view it presents a very different tone for the overall page. Sometimes this is the right thing to do, but not often.

Now, just for fun, let's use our visual template and see how well it works for modeling the color schemes that are actually being used by some real sites on the World Wide Web.

Click each image to view a larger version.

Small graphic of MSN Communities site
Colors used on
MSN Communities
Small graphic of MSDN Online site
Colors used on
MSDN Online
Small graphic of Amazon.com site
Colors used on
Amazon.com
Small graphic of C|Net site
Colors used on
C|Net News
The layout of the MSN Communities site is almost an exact match with our visual template, so our mock-up is close to the real thing. You'll notice that this site is using a monochromatic color scheme.

The MSDN Online site layout isn't quite as close a match. Graphic elements play a part in the MSDN Online site, and this quick template really doesn't allow for their inclusion. You can see how the basic color scheme itself works. Once you have the basics, you can build up graphics that support the page, ensuring that they don't clash with the base colors being used.

The Amazon.com layout comes pretty close to our template. Remember, though, that this site is actually a big collection of sites; while they need to follow a cohesive scheme, they each need some unique visual cues. The areas at Amazon .com do this primarily by changing the color used what I'm calling the title bar. In this example, I am showing the color scheme used by their "Book" site. If your site had the same sort of requirements, be sure that you can modify one or two colors in the overall scheme to provide a slightly different character for each section.

Finally, my template displaying the colors of the C|Net news site doesn't really match the layout of their site, but it does show the colors all working with one another. I can also imagine how this same color scheme would work well for the pages of a famous film processing company. Since you know whom I'm talking about, that shows the important information that can be conveyed through color.

A Tool to Help

Just because I'm a nice guy, I've even prepared a DHTML-based tool to help you experiment with your own color schemes. It will work in either Internet Explorer 4.x or Internet Explorer 5.x.

Selecting random colors out of the blue won't instill your audience with confidence in the information that you are trying to present. You need to take the time to think about the layout and design of your pages, and selecting the right colors is just one facet of that task. I hope I've presented enough information here to help you apply some of these concepts to the Web pages that you design.

Robert Hess hosts the MSDN Show.


  
Show:
© 2014 Microsoft