Color is a complex language. It branches into scientific fields of visual perception and psychological fields of emotional triggers. Being able to apply color theory effectively in any design project is a vital part of accurately conveying meaning.
Because color theory is an art-centered subject, the science of choosing color to evoke mood and emotions screams subjectivity. Design is art – first and foremost – but the catalyzing nature of the internet has altered the connotation of being a designer.
Traditionally we think of designers as the masterminds behind interiors, costumes, products, and games; those who tinker with the object ingredients and turn them into both tangible and intangible experiences. A front-end designer may only focus on building rapid prototypes and giving less thought to color theory than a makeup artist. Design trends are subjectively thought to be more harmful to color theory – and design theory – due to reliance on “things that work”. If every site decided to use gold-plated buttons because they “maximize conversions” the designer’s role becomes less creative and more automated. Fortunately, the design world demonstrates variety and ingenuity every day through applied color theory.
Each area of design raises color-based questions such as:
- how do colors influence consumer/user behavior?
- which emotions do colors invoke?
- how sensitive are humans to light wavelengths and how does that influence color schemes?
- how do the whites of tints and the blacks of shades construct meaning?
As we start digging into color theory it should be known there are two broad – yet subjective – views to how differnet theories can be applied.
1) One school of thought believes colors can invoke specific emotions and reflect various meanings. This is generally known to be the beginner-intermediate approach to apply color theory.
2) Another school of thought – often brought up by very experienced artists, designers, and even scientists – suggests colors are not naturally bound to any specific emotional triggers.
We’ll start with the basics of color synergy and address both schools of thought.
Pure Color, Tints and Shades
Take a look at the following color sets:
This is the standard rainbow. Roy G. Biv, if you will. These colors are bright and cheerful. They invoke joy, youth and energy. If you were to imagine the typical kindergarten classroom, you’d probably think of lots of bright tones — reminiscent of a crayon box.
Notice also that each of the middle colors — orange, green and purple — are the result of the mixture of the colors to the left and right, creating secondary colors. This is something to keep in mind when designing to unite desired meanings and emotions without needing to use two separate colors. You’ll see this in action as we go along.
Mixing or overlaying colors with white creates tints or pastels. In this case, the pure color palette above was mixed or overlaid with white to create this new palette. What do these colors make you think of? Maybe you’re thinking of tranquility or peace? These muted colors are typically used in marketing to target women, such as in spas or for packaging beauty products.
This set of colors is deeper and richer, compared to pure colors and tints. Adding black to colors creates shades. These darker tones are generally associated with mystery or evil. These rich colors may also make you think of fall as leaves change to deep orange, gold and brown shades. These are very different from the bright colors associated with spring and summer.
Opposite of tints or pastels, shades are typically aligned with masculine design. Think about the deep shades you might find on packaging for male-focused products. The colors in the above palette are very similar to the colors in Axe’s line of men’s hair care products.
Using a Color Wheel
Color wheels provide a simple method of choosing colors and visualizing the relationships between them. A color wheel, which you may recall from any level art class, is a circular diagram that displays an arrangement of colors based on their relationships to one another. They can take other geometric forms and can pull in any range of pallets.
The history of the color wheel spans centuries, with notable dating back to Richard Waller’s basic chart in 1686:
As theories developed we arrived at more defined/compact references, such as Wilhelm von Bezold’s 1874 version:
Starting with the primary colors — red, yellow and blue — you can combine any combination of two in equal parts to get the secondary colors of orange, green and purple. Combining two secondary and primary colors in equal parts yields tertiary colors.
Now you can use your color wheel to choose colors and develop a color scheme. There are three main scheme types: monochromatic, analogous and complimentary. Monochromatic colors come from the same wedge on the color wheel, which would be the chosen color and both of the colors on either side. Analogous colors are colors on either side of the chosen color, not including the chosen color. Complementary colors are opposite each other on the color wheel and tend to be very high contrast.
PUTTING IT ALL TOGETHER
Designing With Color
It’s pretty clear how understanding color and color wheels aid in designing for web and print. But how does color meaning translate to designing for clients? If you understand what your client wants to say about the brand and the product or service to the intended audience, you can develop a color scheme that satisfies the need to convey multiple emotions, meanings and feelings without using too many colors.
This is where the art and science of color theory and psychology will come in to play together. Just picking colors isn’t enough. You need to know how to treat and combine colors to yield an appealing and effective design.
Here’s an example:
You have a client who is opening a high-end hair salon. She uses only natural and organic products and prefers a minimalist look. Her typical client is female.
Begin by pulling out keywords that summarize what your client wants:
You can then create a color palette based on these words, using an idea of color meanings.
To stick with her minimalist theme, we can use black and white. Because minimalism usually corresponds with high end — think Apple — we’ve hit multiple meanings. We can go with a pastel green, which creates both a natural and feminine association. To make it even more aligned with minimalism, let’s combine black and white to get a shade of gray. The finished scheme may look something like this:
Certainly, using a color wheel would work with this example as well, but you’d have to be careful about which color wheel scheme would work for your client’s needs. A complementary color scheme for our minimalism-loving client would probably not appeal to her.
Many graphic designers use tools and resources to provide a variety of protypes/version for clients. For example, Adobe’s Kuler:
A few things to keep in mind:
Contrast values are basically the lightness and darkness of a color. White has the lightest contrast value and black has the darkest.
As you can tell from the images, yellow and white have a close contrast value, as do purple and black, so they don’t work well together. However, changing the scheme to black and yellow or white and purple creates a very high-contrast, easily deciphered color scheme.
Consider Impulse Persuasion
A more direct approach to applying color theory in designing an experience or conveying a message is trigger a very quick emotional response in user behavior, such as:
- Share this thing right now – your friends will think you’re super cool if you do
- Buy this thing now – you’ll never have another chance at this low price
- Read this thing – it’s more important than walking your cat
Influencing decision making with colors takes us back to those “design trends” which many find subjective, regardless of how many PhD students tested 100 participants on conversion rates. Copywriting and UX considerations are very much a part of this process as colors. Still, one school of thought strongly stands behind the idea of color psychology and it’s role on consumer behavior. Here are some examples of color designs that work together with other design elements to get a quick reaction from users:
The analogous yellow-orange is a popular choice for most transaction buttons. Mixed with some fancy glowing CSS (raising and lowering the opacity) we may feel very compelled to make an impulse purchase. Of course color cannot be the sole force in this consumer-manipulation equation. Seeing a time limit, higher competitor prices, and good customer reviews are all factors that weigh in.
The button itself is not informational as far as informational shoppers are concerned. This is one of the main reasons designers heavily consider how colors may influence emotions and decision making.
Carefully reevaluate your color scheme if you go beyond three colors. One prominent color works best; you can then complement this color with a neutral hue. Since we know that color conveys meaning, multiple colors could end up sending a confusing message to your audience.
No wonder they say a picture is worth a thousand words. Use these ideas for your next design project. What emotions and feelings you can get across to your audience just by using color in creative ways.
The Meanings of Colors
Just flip through any magazine, look at a book cover or visit any website to see how important it is to choose the correct color scheme to affect the audience’s mood. As a designer, it’s up to you to take the feelings and emotions your clients want to convey and then create a design that reflects what they’ve asked for.
Take a look at the image below that associates colors and meanings. See how closely the meanings given below match your own.
Of course, colors and their associated meanings not only vary from person to person, but also from region to region. The meaning and color combinations above might be typical of Western understanding, but mean something completely different in another part of the world.
However, some colors maintain their meanings on a global level. For instance, red hues provoke feelings of warmth and fire. White, greens and browns are considered earthy tones. This feng shui color chart indicates the various color associations experienced in the Eastern world.
Associations and meanings aren’t always straight forward. Certain meanings are derived over time, as groups or organization use particular colors repeatedly. For example, churches have traditionally used shades of red, purple, blue or gold, so these colors have taken on a religious meaning for many people.
Kendra Cherry, About.com psychology expert, wrote this about some striking research results surrounding color:
- One study found that warm-colored placebo pills were reported as more effective than cool-colored placebo pills.
- Anecdotal evidence has suggested that installing blue-colored streetlights can lead to a reduction of crime in those areas.
- The temperature of the environment might play a role in color preference. People who are warm tend to list cool colors as their favorites, while people who are cold prefer warmer colors.
- Studies have also shown that certain colors can have an impact on performance. Exposing students to the color red prior to an exam has been shown to have a negative impact on test performance.
- More recently, researchers discovered that the color red causes people to react with greater speed and force, something that might prove useful during athletic activities.
- One study that looked at historical data found that sports teams dressed in mostly black uniforms are more likely to receive penalties and that students were more likely to associate negative qualities with a player wearing a black uniform.
Meanings in Cultures Around The World
Suggesting orange always indicates strength is easily debased when considering the cultural meaning of colors on a global scale. The following graph was put together by the Globalization Group using data collected from the following reports: International Color Guide, Tektronix/Xerox, Graphic Design: Psychology of Color, Lesson 13: Colors and Moods, Visual Color Symbolism Chart by Culture,The Meaning of Color, and Psychological Effects of Color. The graph is no longer hosted on the Globalization Group but we retrieved it from an older cached copy from 2012.
Applied Color Science
Designers, psychologists, and UX masters alike don’t just study pure color signals – they also look at the physical contents of light/colors and how humans physically perceive and respond to them.
A very cool and modern approach to the math and science of color is the Natural Colour System Navigator – which is described as:
Each colour can be described by its degree of similarity to the elementary colours yellow, red, blue, green, white and black, which in their purest state cannot be compared to any other colour. The Natural Colour System was developed through 15 years of extensive research with the goal of creating a visually descriptive colour system. Today the usage range from colour management in product development and ensuring accurate paint production to colour design in architecture and interiors. ~NCS
Paul Van Slembrouk wrote in-depth about how the human eye, specifically our cone cells, react to different ranges of light. His focus is on the color yellow and the nature of luminescence. Colin Ware, who has championed many ideas in the world of visualization – and holds a Ph.D in the psychology of perception, wrote about this topic at length in one of his celebrated books: Visual Thinking: for Design (Morgan Kaufmann Series in Interactive Technologies)
Highest Rated Design and Color Theory Books