Color Theory for Designers, Part 1: The Meaning of Color

The Meaning of Color
Color, by definition, is the visual perception of light within the visible spectrum. It is both an art and science, as we have learned to manipulate and utilize it. Color theory is the system of rules and practices that designers and artists use to choose and use colors effectively.
Color theory is valuable because it helps us understand how to use color to create desired reactions in other people. It helps us predict how the choices we make will influence a majority of people. It is a science because it has been tested through controlled experiments and proven true. It is an art because colors are subjective and no two people will ever see the same thing the same way.

The Science of Color
There are two main branches of color theory: colorimetry and chromatics. Colorimetry is the study of the properties of color, including its measurement, production, and perception. Chromatics is the study of colors as hues, tones, and tints.
Colorimetry is what we typically think of when we think of color theory. It is the study of color as it can be measured, including the study of the color wheel, primary colors, secondary colors, and tertiary colors.
Colorimetry is important to understand when working with clients, when you want to know exactly what colors you will be able to use. But it doesn’t tell us anything about how people will actually perceive color, which is where the chromatic branch comes in.
Chromatics explores how color is perceived. It is the study of the emotional and cultural effects of color. It is the study of how color can be used to create a desired reaction in a viewer.
The Meaning of Color: Using Color to Communicate
Color has a variety of meanings and associations. For example, black is often associated with death, white with purity, and red with passion. But it doesn’t work like that for everybody. For some, black may be a color associated with mourning, while for others it is associated with strength.
Color is something that needs to be carefully considered. It is something that can be used as a tool to influence people’s opinions and feelings. A good designer understands how to effectively use color to get the reaction that they want.
With that in mind, there are three basic ways that color can be used:
1. To create visual contrast
2. To evoke an emotional reaction
3. To separate elements
Each of these uses of color is valuable, depending on the situation. Let’s look at each in more detail.
1. To Create Visual Contrast
Visual contrast is the simplest use of color. It is using color to separate and distinguish elements. It is using color to make certain elements stand out and be seen, whether by readability or attractiveness.
Visual contrast can be used in a huge number of ways, including:
a. To Make Text Stand Out
When designing for the Web, color can be invaluable for making text stand out. Black text on a white background may be the easiest way to make text readable, but it is also quite boring. Using color to create visual contrast instantly makes the text on a page more interesting.
Visual contrast can also make text stand out in print. The classic example is a magazine ad, where black text on a white background is used to make the text stand out among the other elements in the ad.
b. To Separate Elements
Color can be used to separate and distinguish elements on a page. It can be used to make the navigation bar on a website stand out from the rest of the page, or the sidebar from the main content.
The simplest way to add color here is to add a thin border of color to each element.
c. To Highlight and Emphasize
Color can be used in a variety of ways to highlight and emphasize elements. It can be used to draw attention to headlines, to make important links stand out, and to draw the reader’s eye to specific areas.
Color can also be used to emphasize elements by making them brighter or more vivid. For example, using a bright red background can make the reader’s eye jump to a given section of text.
Using color to create visual contrast is a valuable way to make elements stand out on a page. It is a simple way to make text more readable, make important elements stand out, or separate elements on a page.
2. To Evoke an Emotional Reaction
Color can also be used to evoke an emotional reaction by using opposing colors. For example, red and green are opposing colors, meaning that they are directly across from each other on the color wheel. Opposing colors are colors that are near each other on the color wheel. They will always contrast with each other.
By using opposing colors, designers can create a powerful visual contrast, especially when the colors are vivid.
Consider this image from the movie The Matrix . The scene is visually striking, and part of that is due to the colors. The red and green are opposites, and by using them so prominently, the filmmakers create a powerful contrast that draws the viewer’s eye.
Using color to evoke an emotional reaction is not always as easy as using a bright, vivid color. Sometimes, it is the exact opposite. Sometimes, a designer will want to get a specific reaction with color, and will use the opposite color to achieve that goal.
For example, designers have found that using the color blue can be a powerful tool for reducing anxiety and increasing feelings of security. By using blue in a design, a designer can help to make the user feel more secure and more relaxed.
3. To Separate Elements
The third use of color is to separate elements. This is the easiest use of color to implement, and the most common usage.
Simply put, using color to separate elements is using color to make elements stand out from each other. This can be accomplished in numerous ways, including:
a. Color to Separate Elements
The simplest way to use color to separate elements is to use color to separate the elements from each other. This is the most basic and direct way to separate elements.
b. Color to Separate Elements into Groups
Color can also be used to separate elements into groups. With this usage, color is used to group similar elements together.
This usage is very common in print design. Consider a brochure, for example. The designer might use one color to separate the background elements from the text. The designer might use a second color to separate the text into groups, such as one group for the title, another for the description, etc.
This usage can also be very effective with websites. Consider a website that uses a theme. The designer might use one color to separate the background, a second to separate the header, a third to separate the navigation, a fourth to separate the sidebar, etc.
c. Color to Separate Similar Elements
Color can also be used to separate similar elements. This is similar to using color to group elements, except the elements are not grouped together. Rather, the similar elements are separated out from one another.
This usage is very common in websites. For example, a designer might use one color for the main content, a second color for the sidebar, and a third color for the navigation bar.