Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This
This chapter is from the book

Applying Color Relationships to Web Design

Perhaps you can impress your clients or colleagues by knowing the difference between a complementary color and a tertiary color, but unless you can put that knowledge to dynamic use on your own site, it's not going to result in practical knowledge. The color relationship terms that were just established all have to do with choosing hues. But what about saturation and value? They are equally as important as hue, if not more so in most cases!

Figure 2.14Figure 2.14 In this horrible example, the color scheme is analogous, using blue, red, and magenta hues. The readability is just plain horrible, if not impossible.

Figure 2.15Figure 2.15 This better example uses the same analogous color scheme of blue, red, and magenta, but it also uses varied values and saturations. What a difference! It is not enough to choose a type of color palette; you must also learn to balance values and saturation of color at the same time for readable color relationships.

Figure 2.16Figure 2.16 Looking at the horrible color combination, you'll notice that all the colors are fully saturated and close in value.

Figure 2.17Figure 2.17 Looking at the better color combination, you'll notice that there is variety in saturation and value.

A great exercise to force yourself to think in these terms is to previsualize your web site in Photoshop, as I have, using layers. Try filling the layers with shades of gray, instead of color, to make the information you want to "pop" work correctly. After you've designed the page using grays, replace the grays with colors. You'll be amazed at how effective this is as a learning exercise.

Figure 2.18Figure 2.18 By designing first in grayscale, you can train yourself to think of colors as values as well as hues.

Figure 2.19Figure 2.19 Hues have replaced grays, and I'm getting the exact read I want with my colors.


A remarkable Photoshop plug-in that came to my attention and relates to this subject is called Hot Door Harmony. You can download a trial version from At the time this chapter was written, the product was Mac-only, but a Windows version is on the way.

Hot Door Harmony lets you select colors through harmonic relationships. The program shows you color selections within the browser-safe spectrum. You can increase the Tint (lighten) or Tone (darken) settings to access different values, and you can copy the hexadecimal code for any color. I highly recommend that you download this tool for a test spin.

Figure 2.20Figure 2.20 Hot Door Harmony is easy to use. Just click on which type of color scheme you want (for example, analogous) and then spin the ball.

If you understand the balance between hue, value, and saturation, you can force the read of your image to highlight what's important and subdue what isn't. It's quite empowering to grasp this concept. Applying it to your designs puts you in control of your color, so it will no longer be left to chance.

Figure 2.21Figure 2.21

Figure 2.22Figure 2.22

Figure 2.23Figure 2.23

Figure 2.24Figure 2.24

Figure 2.25Figure 2.25

Figure 2.26Figure 2.26


Making a web page read with color the way you want is the key to effective communication. You want to draw your end user to the areas of your site that are most important, and you can do that in a variety of ways. Let's look at some examples of using color as a device for creating visual importance or hierarchy.

Figure 2.27Figure 2.27 If I want my logo to be the most important element of this page, I can make it pop with color. If my navigation element is more important, I can choose to make that pop instead.

A very important exercise that you should try before you develop your opening page is to identify what the first, second, third, and fourth reads should be. Armed with a specific order of importance, you should be able to use many of the principles covered in this chapter to achieve your communication goals using color.

  • + Share This
  • 🔖 Save To Your Account