What’s the meaning of colors? | 9 color styles to boost engagement

How important is it?


We don’t consider our ability to distinguish colors to be that important anymore. There are other, more serious things to worry about than the ability to differentiate between different shades of red. Desire and Imperial don’t seem that different, so why bother figuring out what’s the meaning of colors?
Image showing fruits in a tree
For a very long time, telling which fruits are safe to eat and when they’re ripe enough to be picked was a critical ability to have. It’s so important that we even have a special area in our brain used for color recognition, called V8.
Color is vital and not just for us. Lots of animals use it to guide their lives. From plants to fish, butterflies, peacocks, frogs or parrots, they all use coloration to send different signals to each other and embed meaning to it. As an example, animals know not to eat brightly colored frogs because they are poisonous. There were some that didn’t get the memo, but those genes are not in the pool anymore.
Nonetheless, we no longer need to decide if fruits are poisonous. We trust others to do it for us. But we still guide our lives by colors.

Let’s discover color, what it means and how we can use it to increase engagement and conversions.

Modern color


The first thing that comes to mind when talking about modern color is in paintings. No matter the style, the times, or the painter, color was always there.
But why?
Depending on which colors we see, the combination, or context, we can observe different psychological effects. It’s because of that special area in our brain that helps us understand the meaning of colors.
Image showing a cherry tree blossoming
Let’s take Sakura as an example. She was born in Japan and now is 25 and lives in the US. She grew up surrounded by lots of cherry trees and couldn’t wait until spring, to play with the pile of cherry blossom petals that fell on the ground. Because of that, pink is now her favorite color. She almost always associates it with that feeling she had spring after spring. I said almost always because there’s an exception. When the thing that’s pink is something sweet, another memory is relived. The memory of the fair she got to after coming to the States. Pink cotton candy, lollipops, candy… too many to name. The smell, the taste, the images, they all stuck.
Strong feelings can be triggered by just the sight of color, but it’s not that straightforward.
It depends.
Great painters used this powerful impact color has to evoke strong feelings and make a lasting impression on someone’s mind. Keep this in mind as we’ll come back to it later.

How to use color?


To be able to answer this questions, there are 3 others that need to be addressed:

  • Where is it used?
  • What is the goal?
  • Who is the target audience?

As mentioned before, color has a different effect from individual to individual and strongly depends on context. There are many subtleties that can change the desired outcome, but that doesn’t mean that there’s no general guidance. The best way to determine the direction and the only way to justify the use of color besides personal preference is through the use of statistics. We’re not the first to search for the meaning of colors. There are many studies on this subject, but we’ll use the following two from Joe Hallock as an example. They illustrate the favorite color for women and by age group.

Favorite color by age group:

Female favorite color:

Stats like these are the guidelines. They let us know that some colors are more preferred and others more easily ignored. They can get much more complex and target specific terms. Like what color do people associate with high quality, technology, expensiveness or happiness? We then build from it and create a color palette. Will talk about that later on.
Each industry uses color differently and we can make use of demographics, statistics, and surveys to make sure we reach our goal in the desired target audience.
It may seem too much of a hassle. All this attention just for color? Draw your own conclusion:

%
of shoppers place color as a primary reason for why they buy a particular product.

Source: GSMA Mobile Economy 2016

Understanding color


Let’s pick a color and see what we can do with it.
First things first, how to name it? How can I give it a name that can then allow someone else that hasn’t even seen the color to precisely reproduce it? When saying name, I am not talking about a specific word that can be associated with every possible color, as I did with the Desire/Imperial example. We would need a few million words if that would be the case. No, I am talking about notation models.
This color can be called:

  • 3BAE97 – Hexadecimal triplet (HEX)
  • 59, 174, 151 – RGB Decimal
  • 23.1, 68.2, 59.2 – RGB Percent
  • 66, 0, 13, 32 – CMYK
  • 168°, 49.4, 45.7 – HSL
  • 168°, 66.1, 68.2 – HSV (or HSB)
  • 339999 – Web Safe

Depending on where you use it, you’ll see it called differently. One of the simplest ways to understand it is like this:

Hue

Image showing all color hues
Choose one number from 0 to 360. This would be the hue. It represents the full, pure, color where you start from.
For our example, the hue for this color is 168 and it would look like this if nothing else would be added to the mix. It looks different than the color itself because we have two more attributes:

Saturation

Image showing all possible saturation levels for one color
From 0 to 100, it decides how much of that color you will have. 0 being full gray, no color and 100 being full color. In the middle, you have a “half gray- half full color”.
Imagine you are painting a wall with just a layer of paint. You’ll end up with a less intense color than if you were to add another layer. Or two more. 0 layers, 0 saturation. 1 layer, 25 saturation. 2 layers, 50 saturation, and so on. Not really a one-to-one comparison, but you get the picture (pun intended).
The color in the example has a saturation of 49, right in the middle.

Lightness

Image showing all color lightness levels for a color
Imagine a combination of the color, white and black. 0 is full black, no color. 100 is full white, no color. 50 is all color and the same amount of black and white. Going back to the paint analogy, imagine you have a bucket of black paint, one with your color and one with white. If you were to use only the color bucket, you’d have a 50 lightness. If you mix just a little color with the entire black bucket, you’ll end up with a low lightness color. Mix very little white with the whole color bucket and you’ll end up with a lightness that’s just above 50.
The color in the example is yet again in the middle, with a lightness of 46.
We’ll use the lightness and saturation when talking about different palettes, later on.

Creating colors


Depending on the medium where colors are needed, there are different ways to create them. We have the RGB (red, green, blue) color combination as an example. This means that we can tell how a color looks like if we know how much red, green and blue is in it, on a scale from 0 to 255. The technology behind almost all modern screens in the world is based on the way red, green and blue light combines to result in all other colors (LCD screens for example). But it is not the same when mixing paint, as an example. For that, the red blue yellow color wheel is used, with primary, secondary and tertiary colors.

red greenblue red blue yellow
Red green blue color combination Red blue yellow color combination

We can now take the hue that we previously mentioned and combine it with the red blue yellow color combination model. The result can be represented on a wheel:

Image showing the full color wheel Image showing a simplified color wheel

Primary colors


On the color wheel, we don’t have red, green and blue as primary colors, but red, yellow and blue. These are the only 3 colors that cannot be created by combining others and sit equally distanced from each other on the wheel. They are the purest and powerful colors to use.

Image showing the primary colors on the simplified color wheel

Secondary colors


When we start combining these primary colors, we get secondary colors. They can be thought of like a combination of different quantities of primary colors. In this color wheel example, we only go for simple combinations of primary colors for the sake of simplicity. Like red + yellow = orange.
Less powerful or pure, but still have their own story to tell.

Image showing the secondary colors on the simplified color wheel

Tertiary colors


Basically, all the rest. Combining primary colors with secondary colors will get you the remaining colors on the wheel. They are vaguer and more ambiguous, used as less intrusive, supporting colors. Is this yellow or orange? If you can’t tell the difference, how can you trust it to convey a specific message?

Image showing the tertiary colors on the simplified color wheel
These details may seem like nothing more than technicalities, but they are actually much more than that. Low saturated colors convey a different message than high saturated ones. Combining two primary colors has a different effect than combining a primary with a secondary or tertiary color. Each detail will influence the end result in different ways, as you’ll see as we go on. But for now, let’s talk about individual colors, their use, and meaning.

Individual colors


First things first, you can look at the wheel and notice that the bottom-left side feels different than the upper-right side. We instinctively differentiate warm colors (red, orange, yellow) from cool colors (purple, blue, green).
Warm colors are more energetic, powerful, create a sense of movement, motion, eagerness, change. Think of a fire, the sun, a hot chili or blood.

Image showing flames
Cool colors are the opposite. Calming, soothing, low-key, motionless, they can give you the opportunity to relax, unwind and sit back, to let everything sink in. Imagine you’re high up in the mountains, end of spring, enjoying the view.

Image showing a mountain lake
While each color has its own meaning and incites different emotions, they will not stray too far from their warm or cool families.

What do colors really mean?

Red: Energy, Power, Danger, Authority
Orange: Fun, Enthusiasm, Creativity, Warmth
Yellow: Youth, Positivity, Happiness
Green: Healthy, Nature, Stability
Blue: Freedom, Trust, Security, Peace
Purple: Wealth, Wisdom, Success, Royalty
Pink: Innocence, Playful, Feminine, Love
Gray: Futurism, Simplicity, Formality
Black: Power, Discipline, Luxury
White: Purity, Elegance

Let’s have a look at how the big brands are doing it:

Image showing different logos sorted by color

There’s absolutely no coincidence that all these brands chose these colors to play such an important role in their brand image. Some use exclusively one color, but others combine them. Yet again, not at random. I previously said that we’re going to go through color palettes in more detail. Well, now’s the time.

Different ways to use colors

1. Monochromatic

One hue with a few variations of saturation and/or lightness.

A monochromatic image showing a greenish buildingThe color pallet from the image above
With this type of monochromatic palette, the focus is given by contrast. A highly saturated variant of a color among low saturated ones, or the other way around.

Why does it work

Simplicity is key. Easy to understand with not much effort needed to navigate through the entire image with a glance. The monochromatic palette makes use of the brain’s habit of completing the picture without having to look at everything because of the simplicity involved. Combine it with an easy to understand pattern and The Academy Award for Best Supporting Actor goes to The Monochromatic palette!!!

Or you can go the other way, with only one color/hue with no variations, just black, white and/or gray.

A monochromatic image showing a yellow doorThe color pallet from the image above

One color with different variants of black, gray or white.

Why does it work

There’s no way you won’t be able to tell what’s in the center of attention with this variant of the monochromatic palette. It’s the only thing that has color and will stand out no matter what. It’s easy to use but also can prove itself very difficult. If you don’t choose the color properly, that’s all she wrote. Gray, white and black won’t do that much on their own.

2. Pastel

  • Soothing
  • Neutral
  • Soft

A monochromatic image showing a suitcaseThe color pallet from the image above

With a high lightness and medium saturation, pastel colors soothe the eye and provoke a calm feeling. It can also be used to reminisce of a retro look, as the ‘50s were very much pastel.

Why does it work

Whispering the story is sometimes desired. It’s hard to express calmness with bright colors, all competing for attention. Don’t underestimate the power of less to convey more.

3. Muted palette

  • Mild
  • Earthy
  • Mundane

A monochromatic image showing a few books and items on a deskThe color pallet from the image above
With even less color (lower saturation) than the pastel look and staying away from powerful colors such as red, we get the muted pallet. It’s less intrusive to the story and allows for more room to work with other visual tools, like shapes, negative space or black/white intensity.

Why does it work

Same as the pastel, the muted palette does everything it can to stay away from being in the center of attention. The earthy tones are soothing, it goes well with black and white. It’s like having color without using color.

4. Neon look

  • Bright
  • Loud
  • Bold

A monochromatic image showing a late night street illuminated by neon lightsThe color pallet from the image above

If the goal is to attract attention, using bright colors with pure hue is the way to go.

Why does it work

Extremes are always eye-catching, as we don’t usually see them in nature. Supposing it doesn’t go too far to tire the eye or confuse the viewer, a bright palette can work wonders to attract attention in a very short amount of time.
Until now, the focus in these palettes was more on saturation and lightness than how different colors blend together. The next ones will instead, bring color combination to the spotlight.

5. Complementary colors

  • Harmony
  • Equilibrium
  • Contrast

A complementary image showing a scooter next to a door and wallThe color pallet from the image above
Complementary colors are two colors that are diametrically opposed on the color wheel.

Why does it work

They work so well with each other because of the high contrast, as opposing colors are as different to each other as possible (explained previously with primary, secondary and tertiary colors).
Complementary colors work by having a more dominant primary color and one less dominant secondary color. The primary color will be the eye catcher and the secondary color will be the balancing counterpart.

6. Triadic

A triadic image showing a plant, typewriter and a dollThe color pallet from the image above
Using 3 equally distanced colors on the wheel (and/or some variations of them), will result in a very vivid image. However, it can prove itself difficult to pull off.

Why does it work

The simple triad works well when there’s no focus point. If everything is important for the story in equal measure, using 3 colors that are equally different and equally similar, will not draw the eye to any of them directly.
On the other hand, if the colors used are not uniformly spaced on the wheel, two being closer together, you can get more contrast, you get split complementary colors.

7. Split complementary:

A split complementary image showing a cocktail with a city skyline in the backgroundThe color pallet from the image above
In this example, two adjacent colors, blue and purple are used in combination with the opposing color, orange, to give it contrast.

Why does it work

It works because your brain craves for order and it immediately groups blue and purple together due to their similarity, leaving orange to take the spotlight.
A triad palette allows for very complex combinations of colors, saturation, and lightness. You can have 3 neon colors or 3 pastel colors with the simple triad. Or you can combine the styles. One neon color being the contrasting color and two pastel colors being the supportive colors.

8. Analogous

An analogous image showing a mountain landscapeThe color pallet from the image above
An analogous palette is one of the simplest to create, use and understand. Pick a few colors from the wheel that are all close together. That’s it.

Why does it work

The likeness of the colors used makes for the whole picture to be easy to look at and understand. You have a gradient from the left-most color (teal) to the right-most color (flax). The brain doesn’t have to skip from one to the other.
Also, there’s no specific part that draws attention from the get-go. Other techniques and elements need to be used to focus the view on a single area or point.

9. Tetradic+

A tetradic image showing a river street with colored buildingsThe color pallet from the image above
Adding more colors to the triadic palette gets us to the tetradic palette with 4 colors, or we can continue on, to 5, 6, 7 … 16 million.

Why does it work

The more colors we have, the less they matter individually. While it is still possible to have one dominant one, the whole purpose of adding more is to paint a specific picture. Fun, carefree, energetic.
This is the point where combining palettes is most obvious. A pastel tetradic palette is very different from a neon tetradic palette, even with the same number of colors used.

Color was, is, and will always be important.

In marketing, sales, and branding, it’s a crucial part that will strongly influence the decision-making process (subconsciously or not). The meaning of colors and branding go hand in hand. Have a deeper look into how important branding actually is in one of our other articles – Why is branding so important? (with examples)

Share this post