*** From the Archives ***

This article is from July 6, 2000, and is no longer current.

Learning to Use Color on Your Web Site

14

As we go through life, we learn that there are folks who are just natural at some things, while others of us have to work hard just to get by. For instance, some people can pick up a musical instrument in a few days, while it may take others a lifetime to learn. Some of us are barely able to speak English, while others can fluently speak several languages. And some of us are unable to do the Electric Slide without injuring those around them, while others can actually make it look like a line dance. The point is, while many things may seem unobtainable, they are things you can learn. We often think of a good eye for color as something innate rather than something learned. But in fact, given the proper tools, and possibly a few electrical shocks along the way, even a person who’s colorblind can pick color schemes that are pleasing to the eye. So for all you colorblind readers out there, as well as those who quit Art 101 after learning there would be no nude models involved, we’d like to review how to select colors like a pro using the fundamentals of color.

This is Blue

First let’s deal with the basic terminology of color just to make sure we don’t lose any of you along the way (we’d hate to have to come and pick you up later). We all know that primary colors are red, yellow, and blue. Then to get secondary colors, you add a primary color to another primary color. Yellow and red give you orange, red and blue give you purple, and blue and yellow give you green. But what then are tertiary colors? Why, simply a primary color added to one of the adjacent secondary colors. That means there are six tertiary colors (two colors for every primary color). Figure A shows a summary of these colors in all their basic splendor.

Figure A: To understand how to pick the best color schemes, it’s first important to understand the three different types of colors.

To fully understand the manner in which these colors relate, it’s best to imagine these hues organized in a circle. This organization, shown in Figure B, is known in the design world as the color wheel. Sort of pretty, isn’t it? But its real beauty is how it will help you pick colors to use in your Web site design.

Figure B: Combining primary, secondary, and tertiary colors together, we get the color wheel.

Choosing Colors Using the Color Wheel

The simplest approach to choosing colors using the color wheel is to simply imagine an equilateral triangle floating above the wheel. Each color at the vertices is a usable color. (For those of you who flunked math as well as art, the vertices are the places where the lines of the triangle meet.) This type of color selection is called a triad scheme. From our example in Figure C, you can see that we have four separate triad schemes that we can work with. The idea is that these hues work together to form a harmonic combination of color.

Figure C: There are four possible triads from the color wheel.

But you certainly don’t have to stop at triads. You could choose complementary colors, that is, hues that are directly across from each other on the color wheel–red and green for instance. These are called complementary colors because, when used together, they seem to make each other brighter and more vivid, as illustrated in Figure D.

Figure D: Colors opposite from each other on the color wheel are said to be complementary.

Variation on a Scheme

At this point we’re ready to start mixing things up a bit, what with the triads and the complementary colors and all. For example, you could combine two complementary pairs together, called a double complement. Something like yellow and purple, blue and orange. Another iteration of glorious color would be an alternate complement, where you combine a triad with the complement to one of the triadic hues. Green, reddish-purple, red, and orange for instance. You can also have a split complement that uses three colors, a hue and the two adjacent to its complement.

Finally, in the combination category, you can have a tetrad, where you combine four colors that are directly across from each other. Here you would be using a primary, a secondary, and two tertiary colors. Figure E shows examples of each of these schemes.

Figure E: Contrasting themes can liven up any Web site.

All in the Family

Now that we’ve covered all the possible variations of contrasting colors, we need to take a look at the two types of schemes that use related colors–monochromatic and analogous. A monochromatic color set, as it sounds, uses a single hue but with varying tints and shades. Used correctly, this scheme can give a Web site a nice, clean look. An analogous color set, on the other hand, uses four contiguous colors along the wheel. Any four–you just spin the wheel. As you’ll notice from the example shown in Figure F, the analogous scheme appears quite similar to a monochromatic scheme.

Figure F: An analogous scheme looks almost monochromatic.

Putting it all Together

Now that we’ve thoroughly inundated you with color choices, we need to give you a few final warnings. First and foremost, the color schemes we’ve highlighted may not work by themselves. You may still need to tweak the colors by varying the saturation and the value of each of the colors. The schemes that we illustrated are starting points, not ending points. Ultimately, the deciding factor will be the Web site’s readability and the overall look and feel of the colors. To help you visualize how these colors will play off one another, design experts suggest you fire up any of the graphics applications that let you work in layers and compare the various themes to see which works best for your site. For example, as you can see in Figure G, some color combinations work without a bother while others require a little tweaking.

Figure G: You can’t expect every color combination to work for you.

Conclusion

While the choice of color is one of the most subjective decisions in the world of design, it’s still important to understand the theory behind why you should choose one set of colors over another. The theory may not let you instantly select a color scheme, but it will certainly lead you along the right path. Now, all you need to do is learn how to do the Electric Slide.

Tell Me More!

We could devote entire issues to color theory but of cours
e we’d probably get a few complaints from those who are already in the know. But if you’re interested in learning more, we suggest you visit the Color Matters Web site at, what else, www.colormatters.com. The topics on this site range from color and the Web to color and art, color and science, even color and food (be sure to read the suggestion about blue spaghetti!).

Copyright © 2000, Element K Content LLC. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Element K Content LLC is prohibited. Element K is a service mark of Element K LLC.

 

  • anonymous says:

    This is a good article about the basics of color. I like the fact that there are examples along the way.

  • anonymous says:

    would have liked to see sample pages though..

  • Anonymous says:

    there are several artciles on this topic. but this explanation of the color wheel is so concise and clear. thank you.

  • Anonymous says:

    very nice !

  • Anonymous says:

    Nice article, I was looking for these kind of information on website colouring.
    Please continue writing….

    Thanks

  • Anonymous says:

    Dude, these color teories are all wrong.
    Sorry.

  • Anonymous says:

    Fantastic details and it looks like I’ve learned one more thing today, good job

  • Anonymous says:

    Well written (and humorous). Enjoyed reading it and learned something. Thanks1

  • Anonymous says:

    Thanx for the article. I don’t know what’s for the plot – is it wrong or right… but as we’re trying to chose the colors for a WEB site, I guess it would be helpful to add the colors’ codes (numbers) like #FFFFFF or smth… luck! :)

  • Anonymous says:

    what is really help full as well is this adobe website that does this for you really great great tool, find it out at http://www.adobe.com i don’t know the exact website

  • Anonymous says:

    it’s called https://kuler.adobe.com no www or i wton’t come up.

  • Alex121212 says:

    Hello,

    I am a programmer from Russia. This article is so impressed me and I have created the program. I spent a lot of time to create this program but it is absolutely free. Please download and use it. https://color-wheel.info

    Good Luck

    Alex

  • sankar says:

    Wonderfully written. Hats off to the writer.

  • […] Here is a website that gives a good overview of some basic color terminology. […]

  • >