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:

Pure Colors

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.

Tints

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.

Shades

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.

MONOCHROMATIC

ANALOGOUS

COMPLEMENTARY

PUTTING IT ALL TOGETHER

(via)

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:

Feminine

High-end

Natural/organic

Minimalist

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:

Or Paletton:

Or COLOURlovers:

A few things to keep in mind:

Consider Contrast

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

this thing right now – your friends will think you’re if you do Buy this thing now – you’ll never have another chance at this low price

this thing now – you’ll 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.

Simplicity

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.