Web Design for Programmers, Part 2: Color
- The Color Wheel
- The RGB Color Space
- Web-Safe Colors (a Color Cube)
- Choosing Colors
- Summary
Like this article? We recommend
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.
){kind=link}
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:
){kind=link}
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.