Color theory

Summary

Without much color or graphics, every site would become Jakob Nielsen’s dream site. Although Nielsen’s philosophy of bare-bones Web architecture has accessibility and usability merits, most Web designers want to add a signature touch to their sites with many design elements. Fortunately, a designer can add color to a site without losing accessibility and usability if the site is designed with those capabilities in mind. While many designers feel comfortable designing a site for many users, those same designers might feel inadequate when it comes to choosing colors and graphics.

In this article, I’ll cover color basics and three simple color schemes so that you can feel confident about choosing colors for your site. I’ll follow up this article with another piece on how to simplify these color choices. After all, it’s more fun to enjoy the compliments on your website design than it is to sweat over the color choices.

Colors, tints, and shades

Colors, or hues, have historically been divided into primary, secondary, and tertiary colors. The primary colors consist of red, yellow and blue, and they’re called primary colors because you don’t need to mix colors to make these three hues. If you want to translate these colors into web colors, you can recreate them using their hex (hexadecimal) equivalents of #ff0000, #ffff00, and #0033cc as shown in Figure 1:

Figure 1: the primary and secondary colors, and their hex equivalents

Secondary colors are mixed from primary colors, and those colors are as follows:

• Red + Yellow = Orange (#ff9900)
• Yellow + Blue = Green (#00cc00)
• Blue + Red = Violet (#660099)

Tertiary colors are mixed from the secondary colors, and they lie between the primary and secondary colors shown on the wheel above. Although web colors differ from regular “painters” colors, it might help to get hold of a color wheel (as seen in Figure 2) to have at hand while you learn about various color schemes. In addition, a color wheel will show all the tints, tones and shades so you can begin to realize the color possibilities you have at hand. Some more important terms to learn are as follows:

• Tint – The resulting color when white is added
• Tone – The resulting color when gray is added
• Shade – The resulting color when black is added

Figure 2: A real color wheel

The arrows in Figure 2 indicate different things as follows:

• Outermost band – tertiary color of yellow-orange (yellow + orange)
• Second band – the tint of that tertiary color (white added)
• Third band – the tone of the color (gray added)
• Innermost band – shade on the print wheel (black added)

As you can see from the color wheel shown above, the amount of white, gray and black added to a color are minor—just enough to alter the original color and to create what is known as a monochromatic color scheme.

Monochromatic color schemes

Color schemes have been around for centuries, so there’s no need to reinvent the color wheel. Although web color differs from print color, the concepts are the same. You just exchange hex numbers for color names, and match then as closely as possible. One online tool I suggest using to help out with this is the Color Scheme Designer, as seen in Figure 3, which allows you to determine color schemes quickly and easily, and even determine whether the colors you’ve chosen provide enough contrast for low-vision or color-blind users.

Figure 3: Color Scheme Generator II.

If you want more help deciding whether the colors you’ve chosen provide a good enough contrast, try out the Contrast Analyser from the Paciello Group. This tool checks the contrast between foreground and background colors.

To achieve the tint, tone and shade for the yellow-orange color at the online color generator, first select the color that the arrow points to in the image shown above. Then, select Mono in the panel located under the color wheel and Default in the panel in the box to the right. Also select Normal Vision in the selection from the pull-down menu at the bottom right. Do not check the “reduce to ‘safe’ colors” box above the color box unless you’re a purist.

Note:The term “web-safe colors” comes from a time when monitors could display 256 colors, only 216 of which were the same across Windows/Mac/Unix platforms, hence the “web safe” monicker. While some purists still stick with the "Web-safe color palette", modern browsers are capable of handling what is known as “24-bit” color. Actual 24-bit color at ten to eleven bits per channel produces 16,777,216 distinct colors. In other words, it’s safe to say that the “Web safe” color palette rarely is needed anymore.

Back to the monochromatic color scheme. The results you should receive by following the steps described above are: yellow-orange (#FFCC00), tint (#FFF2BF), tone (#FFE680), and shade (#B38F00). These hex numbers are much more reliable than any guesses you will make by trying to match a tangible color wheel to the backlit screen of a Web browser. And, as the “Mono” suggests, this scheme translates to a monochromatic color scheme, as seen in Figure 4.

Figure 4: A monochromatic color scheme.

A monochromatic color scheme equates to one color and all its tints, tones and shades. While this scheme is the easiest to use, it doesn’t provide much excitement in a Web design for many designers. Instead, you may want to explore other schemes to add pizzaz to your links, images, and banners.

Complementary Color Schemes

The next color scheme family to explore is the complementary scheme, where you match up colors that lie directly opposite each other on the color wheel, as seen in Figure 5.

Figure 5: Examples of complementary color schemes.

When you choose one color and its opposite color, you also include all the tints, tones and shades of both colors. This provides a wider range of choices, and it translates well with the online color tool—see Figure 6.

Figure 6: A complementary color scheme inside the online color tool.

In the image above, I have chosen an orange color with the opposite complementary color of blue. The settings I chose to get to this scheme include the Contrast setting at lower left, the default on the menu below the generator, and normal vision. Notice that the main color selected is marked by a black dot on the inner disc of the color wheel (both above and online at the generator site) and that the opposite, complementary color that was automatically picked for you is marked with a hollow circle in the inner rim. These markings make it easier for you to analyze your color scheme.

This color generator makes it easy for you to choose colors for links, visited links, and even images as it provides the hex colors for you at the upper right. You can mix and match any pure color (the color at the top) and its tint, tone or shade and feel great about choosing a solid color scheme.

Figure 7: The Greenpeace site—a good example of a complementary color scheme.

Greenpeace USA (see Figure 7) is one of many sites that uses a contrasting color scheme. Yes, you see yellows and oranges, but the predominant colors are green and red—two colors that are directly opposite each other on the color wheel. You almost can’t go wrong with this complementary color method. In fact, the use of a “warm” and “cool” color combination makes a site zing with color contrast.

Warm vs. cool colors

Complementary color schemes are great to use in websites, as they also contain both warm and cool colors. The use of these colors provides contrast, and it’s easy to remember which colors are “warm” and which colors are “cool” as you can see in Figure 8 (and on the color generator site):

Figure 8: Warm and cool colors.

Warm colors are those colors that would remind you of the summer, sun or fire. They consist of violets to yellows. Cool colors might remind you of spring, ice, or water. Those colors range from yellow-green back to violet. If you notice how the colors work on the wheel, you’ll soon discover that you can’t choose one color without choosing its opposite in “temperature.” So, if you pick a hot red, the opposite is a cool green. Or, if you pick a cool blue-green, you’ll end up with a spicy red-orange on the other side.

One example of a site that consistently uses a warm/cool color combination is Ecolution, as seen in Figure 9.

Figure 9: Ecolution—a good example of warm/cool colors.

Ecolution usually uses red as an accent color on their home page in contrast to their green logo. They then blend the two contrasting colors with varying tints, tones and shades of those two colors. Even the “blacks” in an image can lean toward “warm” or “cool,” as do whites. Overall, the photograph is “warm,” which plays nicely with the stark pure green. Although they use the same colors as Greenpeace, the Ecolution site takes on less “glare” with the rich tones and shades in the photograph.

You never realized that color theory was so easy, did you? Well, then…let’s complicate the issue a bit…

Triadic color schemes

A triadic color scheme (see Figure 10) is created when you pick one color and then pick two other colors that lie equidistant from each other around the circle, like so:

Figure 10: A triadic color scheme.

I chose the primary colors for this scheme as I wanted to show how the color schemes seem to contain a method to the madness. It’s no accident that the primary colors lie where they do on the color wheel, as each color contains an equal amount of secondary and tertiary colors between each primary. But, a primary color triadic scheme can seem old-hat as it has been overused. Instead, you might try some other color choices at the online color generator, something like Figure 11:

Figure 11: An alternative triadic color scheme.

The above triad scheme is built from orange-yellow, blue-green, and red-violet. I picked the orange-yellow first (notice the dark dot on the inner section of the color wheel at left), and then chose the Triad selection located beneath the wheel. The generator automatically chose the triadic choices including all tints, tones and shades. The accompanying colors are marked on the color wheel with the hollow dots, just as the complementary color was noted in the monochromatic example.

Now, this is where a real color wheel might come in handy, as the online results didn’t quite match the results of a hand-held color wheel. When I pushed the Angle/Distance tool under the color wheel to “max,” however, it seemed to match the color wheel I held in my hand. The results shown above are those that matched the color wheel the closest.

The triadic color scheme also contains warm and cool colors, but one temperature will predominate. Usually, the temperature that will overshadow the other is the one that you chose on the front end. In this case, I initially chose the orange-yellow, which is a warm color. The warm colors shown above will predominate as a result, with one of the other two colors lending the cool contrast.

Figure 12: Puzzle Pirates—A good triadic color scheme.

Puzzle Pirates, shown in Figure 12, uses a triadic scheme on their home page. They use the primary red-blue-yellow scheme, and this primary scheme is perfect for a kid’s game site. Note that the blue is predominant and that the reds and yellows are used as accents and to lead the eye around the page.

Tetradic color schemes

The more colors you choose, the more complicated the color scheme. However, one trick is to find a tint, tone or shade and stick to those regions across the board rather than mix pure colors and their tints, tones and shades. This method works well with a color scheme such as the four-color tetradic scheme. This scheme (see Figure 13) is just like the complementary scheme, only you use two complementaries that are equidistant.

Figure 13: Tetradic color schemes.

Figure 14 shows how a tetrad scheme works out online:

Figure 14: A tetradic color scheme inside the online generator.

Note the black dot under the red in the color wheel to the left. This was the first color that I chose; I then clicked on the Tetrad button beneath the wheel. The four colors that showed up once again were a bit off from my hand-held color wheel, but when I pushed the Angle/Distance tool under the color wheel to “max,” it seemed to match the color wheel I held in my hand. The results shown above are those that matched the color wheel the closest.

This color scheme can become quite complicated, so what you might want to do at this point is to pick all four tints or tones or shades from the colors in the right column. You can make your choices by clicking the arrows at the far right. For instance, Figure 15 shows an example of a block filled with the tints of this color scheme:

Figure 15: Tetradic tints.

And Figure 16 shows an example of the mid-range tones:

Figure 16: Tetradic mid-range tones.

If you look closely at the squares above, you’ll see that the generator also provides you with four monochromatic color schemes. These schemes are shown both in the column to the right as well as in each square within the larger square.

Figure 17: The Jane Goodall Institute site—a good tetradic color scheme example.

The Jane Goodall Institute site (Figure 17) is one of the few sites that really carries the tetradic color scheme well. Note the purple, the yellow tone, the red highlights in the photograph (the site holds more red further down on the page), and the greens. The purple doesn’t match up exactly to the color scheme generated by the online color tool—it leans toward a red-violet—but it’s close enough to use as an example of how you can use both a color wheel and the online color generator to produce ideas for your site.

Now, when you surf around the Web searching for color and design ideas, keep your color wheel close at hand to learn more about how designers use color schemes on your favorite websites!

Summary

Although color combinations may seem complicated, all color schemes carry certain “rules.” These guidelines make it easy to understand which colors work together to add interest and contrast to a website.

The reason color wheels exist are for people to use them. Color wheels and tools like the online Color Generator make color-picking easy even for the inexperienced designer.

The four color schemes covered in this article are monochromatic, complementary, triadic, and tetradic. Although other color schemes exist, these four color schemes are the easiest to understand and implement.

See also

Exercise Questions

Note: the last two questions do not have “right” or “wrong” answers.

• Name the three primary colors, and explain why they’re called primary colors.
• Name the three secondary colors and the primary colors that are used to make those secondary hues.
• Describe how a tint, a tone, and a shade are made.
• What is a monochromatic color scheme?
• What is a complementary color scheme?
• Describe “warm” and “cool” colors.
• What is a triadic color scheme? Can you pick three colors that would fit this scheme?
• What is a tetradic color scheme? Can you pick four colors that would fit this scheme?
• Which color scheme seems easiest to use?
• Which color scheme seems the most complicated?