Luis Gonzalez, senior brand designer at InVision, has an exercise for you: Think about the color red. What comes to mind? Perhaps feelings like anger, passion, energy simmer to the surface. Or maybe visions of flushed cheeks, a cherry lipstick shade, a stop sign, blood, or a heart float through your head.
While those might not have been the exact thoughts and feelings red evoked in you, it’s likely you associated the color with certain emotions, ideas, and objects. You’re not alone: This is a universal human experience—and it’s a powerful tool you can use as a designer. Understanding that color choice goes beyond personal preferences can help you not only improve a product’s usability—but even psychologically impact your users.
In order to unleash the power of color, you first have to start by understanding color theory, the color wheel, how to use complementary colors to create an impactful color scheme, and the psychological effects of those colors. Whether you’re first diving into the topic (or are just looking for a refresher), here’s how to begin:
Understanding color theory
Color theory can help designers determine which colors look good together. Color theory goes beyond just “eyeing” color combinations, though, which is where the science part comes in.
At the heart of color theory is the color wheel, which was created in the late 17th century by Sir Isaac Newton. Best known for his physics breakthroughs, Newton mapped the color spectrum into a circle.
Today, the color wheel can help artists and designers find harmonious color combinations based on the geometric relationships represented on the color wheel. As an example, a triadic color scheme involves three evenly-spaced colors on the color wheel and that will yield a bold combination. Meanwhile, a tetradic color scheme involves four colors evenly spaced out on the color wheel, and can work if you want to use a dominant color with supporting accent colors.
Designers looking to experiment with colors can use color picker extensions, use color palette generators like Muzli’s, or even consult Pinterest boards, Gonzalez says.
“My biggest recommendation would be go back to the basics and look at a color wheel,” he says.
His recommended reading? Josef Albers’ Interaction of Color, an art education book breaking down complex color theory principles.
Color wheel
The color wheel is a visual representation of colors, with hues arranged according to wavelength. Color wheels allow color relationships to be represented geometrically, and show the relationship between primary colors, secondary colors and tertiary colors.
In the traditional RYB color wheel, the primary colors are red, yellow and blue. You can create secondary colors—orange, green, and purple—by mixing primary colors. Red and yellow create orange. Yellow and blue creates green. Red and blue creates purple. You remember this from elementary school, right?
Then, mixing secondary colors and primary colors creates tertiary colors.
Many different iterations of the color wheel exist, but many involving these three relationship types show a dozen colors.
Modern color theory
Digital designers may be more familiar with an RGB color model with red, green and blue to mix light. Cyan Magenta Yellow Black, or CMYK, are the four basic colors for print images, and, as subtractive colors, get darker when blended.
Principles of color theory
You were probably first introduced to the most basic color theory concept back in elementary school when you were given a palette of primary colors to paint with. Red, blue, and yellow are primary colors— and they can’t be created through mixing colors. Mix them all together and you get brown. But mix them and you can create all other colors.
Color theory also involves a color’s darkness or lightness, or color values. You can change a color’s hue by adding white for tint, which will give you lighter pastel colors, and black for shade to darken and dull color. When gray is added to a primary, secondary or tertiary color, it creates a tone. If a color is toned down, its brightness and intensity is lessened.
Once you add tints, shades, and tones, you get an expanded color wheel.
Also, color theory involves how you arrange colors together to create schemes. For example, a monochromatic color scheme is one with one color in various tints and shades. Or, an analogous color scheme involves neighboring colors on the wheel, like red, orange and yellow.
Complementary colors
When you’re pairing colors, you can find harmony through choosing complementary colors. In this case, opposites attract. This particular color scheme draws from two colors on the opposite side of the color wheel. When you do this, the result is a high-contrast color combo that’s bright and that pops.
Examples of complementary color combinations are: Red and green; yellow and purple; orange and blue; green and magenta. Complementary color combos tend to be bold, which is why sports teams often use this formula for their colors.
To throw in a third color, and make the color scheme less intense, you can use a split complementary color scheme. It uses one color as a base and two colors adjacent to its complement.
Additional considerations for color theory
Now let’s dive into how designers can use color theory to enhance their projects. Think about the last time you filled out a contact form on a website. Miss a field, and a red error message likely pops up. On the contrary, if you need to re-enter a password for verification, and you enter everything correctly, a green message signals you to proceed. In this case, not only does color communicate how to use your product, but also draws on psychology to evoke emotional responses (green = good, red = bad).
Red and green aren’t the only colors with psychological power: The color wheel can also be sliced into warm and cool colors. People associate cooler colors like blue with peace and calm. Warm colors like red are more energetic and associated with passion.
And color has an effect on products themselves. Research suggests people make a subconscious judgment about a product within 90 seconds, and 62% to 90% of that assessment is based on color alone, according to CCICOLOR – Institute for Color Research. Another 2011 study published in the Journal of the Academy of Marketing Science found color was an important factor in how consumers perceive brands.
According to a 2003 study by Joe Hallock for a thesis at the University of Washington, 34% of study participants associated the color blue with trust; 28% associated blue with security; 75% associated red with speed; 42% associated black with high-quality; and 26% associated orange with being cheap or inexpensive.
When it comes to favorite colors, research from the 1990s says males prefer bolder colors while females like softer colors.
Designers’ color theory challenges
But designers can face challenges when landing on a consistent color scheme.
“Everyone has their preferences in colors, whether it’s a specific color or a grouping of colors, like warmer or cooler colors.” Gonzalez says. Looping in branding experts, he says, will help remove preferences from the equation and help meet brand specifications. There’s also a chance that your color palette will be included in your team’s design system.
It’s here: The new InVision DSM.
Start, craft, and evangelize your design system with an improved onboarding experience and more flexible documentation on the web.
Readability is also important, Gonzalez says, and needs to be a first consideration. A color scheme can be beautiful and innovative, but if it causes users to strain their eyes while deciphering text, then head back to the drawing board. Also consider that 4 to 5 percent of the population is colorblind. With this in mind, you can use alternatives to color to help guide your user. For example, you can rely on an asterisk, not color, to signal required fields, says Soren Hamby, design advocate at InVision.
Just like fashion, color schemes can be trendy, with “it” colors popping up every season. Designers should consider trendier color’s staying power. Ask yourself: Will it date the brand in a year? Also, know that color can be interpreted differently across cultures. Depending where your clients are located, red could symbolize passion, love, luck, prosperity, aggression, or death.
In the end, though, if you aim to please everyone, you ultimately please no one, Gonzalez says. He suggests finding your target audience and testing your color schemes with your audience.
Brittany Anas is a Denver, Colorado-based freelance writer. She is a regular contributor to publications including Apartment Therapy, Forbes and Men’s Journal and previously was a reporter at the Daily Camera in Boulder and The Denver Post. She worked three years as a federal background investigator before transitioning into a full-time freelance role.
