Color Theory: The Emotional Impact of The Right Colors in Your Design

“People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color.” —  99designs, online graphic design marketplace

Color has a predictable and quantifiable physiological effect that influences our perception and behavior. It’s about emotions, and whether you realize it or not, the colors used in a design strongly affect the emotions of your users.

At the core of all product design is visual communication. What users do with a software application depends nearly entirely on what they see. The color of elements like buttons, toggles, input boxes, navigation, and the primary sections of the application can play a significant part in how users understand and interact with the software.

In our user experience (UX) and visual design classes at General Assembly, we spend a lot of time discussing how, when, and why to influence our users with everything from information architecture to user interface (UI) and interactions. To say the use of color is just one of those ways is to underestimate its power over everything from the user interface (UI), to graphics and transitions, to the subconscious message you’re sending to your users.

It’s commonly believed among most designers that the color blue conveys a feeling of trust, calm, and masculinity; that yellow makes you think of creativity, summer, and positivity; and red is the color of passion.

Blue is often thought to be for boys, pink for girls, and white for purity.

But wait  —  be careful!

Not all colors mean the same thing in all contexts, or all cultures. Not only is color subjective — it is also contextual and culturally defined.

Color has a different meaning depending on how it’s used, and by whom. Red can be the color of love and valentines, or of serial killers and cult leaders. Red can be fast like a race car, cool as an icy-cold Coke, or dead as a zombie.

Colors are culturally created; in America, the color white often signifies purity, chastity, and virtue, and so is the color of a wedding gown. In India, widows wear white saris as a sign of mourning, and brides often wear red to signify prosperity and fertility. An American may see green and think of the great outdoors or jealousy (“green with envy”), whereas the Chinese are likely to also think of sickness or infidelity — and both cultures associate the color with eco-friendliness and wealth.

How you use a color  —  what palettes you put together  —  must be thought through carefully, and with sensitivity to the culture in which that brand or product will be displayed.

While the psychology of color may help to explain why someone feels a certain way about a certain color, it isn’t the only determining factor in selecting a color palette for a brand or product. The entire design, including UX, UI, branding, and logo, all work together with color to convey a subconscious message to your customers. To effectively leverage the power of color, designers have to think holistically across the brand, as well as in detail about particular uses of the palette, and the context in which it will be used.

Even more specifically, at GA, we teach designers to ask, “What emotions do we want our brand to promote or project?”

So how do we figure that out? By using a few handy tools like mood boards, usability testing, and palette generators.

One way to begin developing a color palette for your product is to start with a mood board. A mood board is an arrangement of images, ideas, inspiration, and products intended to evoke or project a particular style or concept that you associate with your product or want people to associate it with.

Mood boards are an excellent way to play around with themes, images, and colors in context. From there you can start to put together a working palette to test with your customers, stakeholders, and users.

There are whole schools of thought around how to build a color palette and some fantastic tools to help you do it.

Here are some of the contradictions you’ll find across designers’ thoughts on building color palettes:

• Some designers recommend limiting the palette to three colors, while others say four or five.
• You’ll also find colorists who say you need a neutral, a bright, and a dark for any workable palette.
• Others caution designers to stay with the same saturation and brightness values but select different hues.
• Contradicting that, some advocate for all one hue and vary the saturation and brightness.

What to do, what to do? The answer is: It depends. Sometimes just knowing basic palette theory will help you with your own. Here’s a breakdown of the five most common color harmonies:

Monochromatic colors all have the same hue, but vary the saturation and brightness. This palette comes across as sophisticated and subtle, and it’s great for when the content is the focus and the UI elements need to fade to the background.

Triads come from three opposing points on the color wheel. When the saturation and brightness are kept the same, the hue variations are complementary to one another, and will liven up your designs.

Analogous colors sit next to each other on the color wheel. The closer they are in hue, the more they will blend together. It takes careful balancing to find the three that work happily together without clashing.

Complementary and split complementary are colors that sit opposite from each other on the color wheel. These colors make a great contrast for each other and work well with any product that wants to pop.

Finding the perfect color for your brand depends on your product, the emotional response you’re hoping to evoke, the color trends of the year (or season, or moment), and cultural aesthetics and values. Once you’ve got a few possible palettes together, start designing with them and test your creations:

• Throw some logos, UIs, and social media posts at your customer base and stakeholders, and ask them what they see and feel.
• Pull out your mood boards and do some A/B testing.
• Ask your user group to give a thumbs up or thumbs down for each sample image or color group or logo.

It won’t be hard to see what people are loving and leaving this season, and which palettes will evoke the response you want.

During the full-time User Experience Design Immersive course at General Assembly, which I teach in San Francisco, we spend time working through both the science of color theory — how RGB color systems differ from CMYK color systems, and when to use each — as well as how to use color in product design to achieve business goals.

In GA’s part-time Visual Design course, students learn the fundamentals of color theory and color schemes, and learn how to apply them to designs for the web, like websites and interfaces.