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

Home > Articles > Web Design & Development > Usability

Web Design for Programmers, Part 2: Color

  • Print
  • + Share This
Did you pay attention when they discussed the color wheel in the third grade? Me neither. This second article in the series on Web design for programmers discusses the intangible qualities of color, why there is more than one color wheel, the Web color cube, and what it all means! Learn how to use color effectively in your designs.
Like this article? We recommend

Like this article? We recommend

What is color? Technically, color is a frequency range so high in the electromagnetic spectrum that it is measured not in cycles per second, but in angstroms, microscopic distances representing the wavelength of extremely high-speed vibrations.

More practically, color is that intangible quality of light that we perceive as such. It can be broken down in a number of ways, and we will discuss some of them in the following sections.

The Color Wheel

Okay, here's the technical part: The color wheel you learned in school is not the only color wheel. Yes, it's important—and we will cover it here—but there is another one that is also important when you design for the Web.

Figure 1 shows the wheel you learned about in school.

Figure 1-The color wheel you learned in school.

The "primary" colors are Red, Yellow, and Blue; and the "secondary" colors (created by mixing pairs of adjacent primary colors) are Orange, Green, and Violet. The "warm" colors are Red, Orange, and Yellow; and the "cool" colors are Green, Blue, and Violet. Got it? Good! That's the easy part.

The color wheel shown in Figure 1 is the color wheel that we all learned about in school (even if we didn't pay attention). What they didn't tell you in school is that the "Red-Yellow-Blue" wheel is how colors work in reflected light. Color works differently in projected light. The projected-light color wheel is based on Red, Green, and Blue as the primary colors (the secondary colors are Yellow, Cyan, and Violet). Figure 2 shows the Red-Green-Blue color wheel:

Figure 2-The other color wheel: the R-G-B color space.

Because of the way colors mix when projected, the Red-Green-Blue wheel (often called simply "RGB") is commonly used in projected media, such as computer screens and film projection.

How do you know when to use which wheel? When you are concerned with perception, think about the standard Red-Yellow-Blue color wheel. When you are concerned about mixing colors for display on a computer screen, use the RGB wheel.

  • + Share This
  • 🔖 Save To Your Account