Have you ever noticed the eco-friendly option in the grocery aisle tends to be packaged in green? And cereal boxes tend to be bright red, orange, and yellow? That’s because green makes people think of nature, and red, orange and yellow bring up images of food and make people feel happy and energized.
Good marketers know consumers subconsciously use color to guide us when deciding what to buy. The same is true in the online realm when we search for a skin care company, an athleticwear, or even an online florist: The colors of their websites will instinctively and immediately help shape our opinion.
As such, it’s important the colors on your site reflect the qualities of your brand and product. One way to make sure the right colors and color combinations are working for you is to use color theory. Here’s how to do that.
Table of Contents
What is color theory?
Color theory is the body of knowledge about how colors are made and how they affect people’s moods and impressions. Colors are discussed in terms of:
- Hue.The predominant tint or color: i.e., whether it’s a red, a green, a violet, a yellow, an orange, or a blue.
- Shade or tint.How dark or light the color is.
- Chroma or brightness.How saturated a color is.
Studies show theimpact of color on emotions. At a basic level, red is perceived to be an exciting, strong color. Green is associated with health. Blue evokes feelings of trust and calm. Different color combinations will evoke different reactions from customers. Color harmony, also part of color theory, is when a subset of colors is aesthetically pleasing.
Additive vs. subtractive color models
This difference between additive and subtractive color models can be important when you are making surebranding is consistentbetween your website and printed materials. Here’s what you need to know:
- Additive color model.The internet (as well as television and other electronically represented colors) uses the RGB (red, green, blue) model, which is known as an additive color model. An additive model is used in light-producing electronics, where colors are produced by adding more wavelengths of light, or colored light. For example, our brains process the mix of red and green lights as yellow because our eyes only have sensors for red, green, and blue wavelengths, so all colors are made up, in our eyes, of those three colors.
- Subtractive color model.Physical color printing (such as on paper), uses the CMYK (cyan, magenta, yellow, and black) color model, which is known as a subtractive color model. In subtractive color mixing, pigments are mixed together. Since each pigment continues to absorb the same lightwaves, adding additional pigments subtracts from the amount of light reflected back to the view.
Since printed and electronically produced colors use different color models, they are calibrated using different color codes. For instance, Coca-Cola's red color code is 244 0 0 on the RGB scale (the zeros mean no green or blue) and 4 100 95 0 on the CMYK scale.
The color wheel
色轮是一个组织视觉雕塑作品n of colors across the spectrum. All the hues and shades of colors are known as the gamut of colors on a color wheel. Most people are familiar with the color wheel for art, which uses red, yellow, and blue as its foundational colors. This is the oldest and most common color wheel.
The primary and secondary colors (red, yellow, blue, green, purple, and orange), along with black, white, brown, pink, and gray, make up the color categories, or color terms. In theory, all colors fall into one of these basic categories. Including only primary, secondary, and tertiary colors, there are 12 colors on the color wheel.
Primary colors
In a traditional color wheel, the primary colors are red, yellow, and blue. These are the colors that cannot be made by combining any other colors.
Secondary colors
Secondary colors are the result of the pure combination of two primary colors. There are three of them: orange (red and yellow combined), green (yellow and blue), and purple (blue and red). Each primary color on the color wheel is located directly opposite the secondary color made up by the other two primary colors. In other words, red is opposite to green, yellow to purple, and blue to orange. Those pairs of colors sit opposite one another on the color wheel and are known as complementary colors.
Tertiary colors
Tertiary colors are found between the primary and secondary colors. For instance, between yellow and green there is yellow-green, and between red and orange there is red-orange. There are six tertiary colors.
What is color temperature?
Colors are divided into warm and cool colors. Warm colors are dominated by red, orange, and yellow, whereas cool colors are related to blue. Neutrals, such as gray and various shades of white, can be warm or cool, depending on the undertone.
Of course, warmth and coolness in colors is also relative. A warm red leans more toward blue (purple), whereas a cool red leans toward yellow, but both would look warm compared to teal. This is an example of simultaneous color contrast, which is that colors appear different depending on the colors surrounding them.
What are color schemes?
A color scheme is the set of colors that are used for any specific item, be it a brand, event, room, or outfit. A good color scheme uses a limited number of hues that combine together harmoniously. Some color schemes (or palettes) are easily identified: If you walk into any US drugstore during the first week of July, for instance, you will see the traditional red, white, and dark blue of the American flag.
You can create a color scheme from any base color. There are six major types of color schemes:
1. Monochromatic
As the name suggests, monochromatic color schemes use one color in various shades. An example of this is PayPal’s use of dark and light blue in its logo.
2. Analogous
Analogous color schemes use three colors located next to one another on a color wheel, such as teal, blue, and green, or reddish orange, orange, and yellow-orange. The Mastercard logo, for example, uses a bright red circle and a dark yellow circle that overlap to make orange.
3. Complementary
Complementary color schemes use complementary colors, which are directly opposite one another on the color wheel. Think of Christmas decor with its bright red and green color scheme.
4. Triadic
Triadic color schemes use three colors that are evenly spaced out on the color wheel. That could be red, yellow, and blue, or reddish-orange, greenish-yellow, and purplish-blue. An example of this would be Superman’s blue suit, red cape, and yellow lettering.
5. Tetradic (square or rectangle)
A tetradic color scheme uses four colors. In a square tetradic scheme, the colors will be evenly spaced on the color wheel, with 90 degrees between each. For a rectangular tetradic scheme, you will choose two analogous colors, such as blue and blue-green, and their complements—in this case, orange and reddish orange. Google’s logo—with letters in bold red, yellow, green, or blue—is a tetradic color scheme.
6. Split complementary
This features one base color and then the two colors on either side of the base color’s complement, so a split complementary scheme with a base of purple would use orange-yellow and yellow-green as its accent colors. It is recommended in this scheme to use the base color as the dominant color and the other two as accent colors. For example, Taco Bell’s purple, pink, and yellow logo has a split complementary color scheme.
How to use color theory for your business
Choosing the right colors for your website and logo could subtly nudge consumers to feel one way or another toward your brand. Here’s how to use color theory for your business:
Decide on your message
Decide what message you want to convey or what emotions you want to evoke with your branding. When you think about how messages translate to colors, be aware of the connotations of specific colors.
For instance, pink and purple have historically been colors used to target women, so a pink-themed website might send the message that your business is geared toward women. Likewise, a staid brown might reflect trustworthiness on a law firm’s website, but might be off-putting for your physical therapy studio, whereas a healthy green, enthusiastic yellow, or soothing blue might be more appropriate.
Conduct research
Put together a mood board of some colors you feel demonstrate the message you want to convey. Look at your competitors’ color schemes and see if there are any themes that emerge. While you don’t want to mimic any other brand, you also want to make sure you’re in step with current trends in your industry. You could also check theShopify Theme Store, which has pre-built website layouts for your online shop, for design inspiration.
Pick your dominant color
Based on your brand identity, your research, and your industry, this will be the main color you use on your brand visuals, including your website and logo. Ask yourself: Does this color evoke the mood I want customers to associate with my business? Does it reflect the energy of my business?
For instance, bright red, which is associated with high energy, might be appropriate for a kids’ party planner, suggesting clowns and balloons. However, bright red might be overwhelming for a cosmetic surgeon’s office and may even suggest danger in that context.
Pick your accent colors
Guided by the relationships found in one of the color schemes listed above, use the color wheel to find harmonic accent colors or use acolor palette generatorto produce options. Notice that even the most complicated color schemes use only four colors and limit two or three of those colors to accents.
Color theory FAQ
What is color harmony and how is it achieved?
Color harmony is when a set of colors is aesthetically pleasing. Harmonious color combinations are composed of colors that are proportionally spaced from one another on the color wheel, in complementary or analogous patterns.
What is the significance of color contrast in color theory?
Color contrast is how different two colors are from one another. Contrast can be achieved with hue (i.e., blue versus orange, which appear opposite one another on the color wheel) or with tone, (i.e., darker and lighter colors). Black and white are a high-contrast pair, while light and dark grays provide less contrast. For adequate web accessibility, you should use high-contrast text against the background.
What are some mistakes to avoid when applying color theory in design?
Some common mistakes people make when applying color theory in their business include:
- Using more than four colors or using every color the same amount.
- Using low-contrast text on your website. This will decrease users’ ability to read it.
- Using 100% black anywhere on your website. This causes eye strain; dark gray is sufficient.
- Picking colors that don’t reflect your brand values/type of product