Day 26: Let’s talk about emotions and unicorns…and color

Color matters. Need proof?

Have you ever wondered why we usually dress our boys in blue and our girls in pink?

No? Me neither (even though it’s an interesting story).

That’s how much color is ingrained in our brains. It’s so powerful that for cases like this we simply default to it.

As soon as we perceive a color, our brain starts firing all sorts of signals to our bodies to release hormones which are responsible for our emotional shifts. It’s totally out of our control.

Obviously marketers started speculating on this a while ago, hence why you’ve probably seen those case studies where changing a button’s color increased conversions by a shitload%. Unfortunately it’s not that easy my friend.

Even though the power of color is somewhat unpredictable, there are some things we can control when it comes to how we use it on our websites.

Let’s focus on these, we have no time for speculation.

Yes, you can use color to hint at certain emotions

But that’s the extent of it. You shouldn’t rely exclusively on fixed color/emotion pairings. How we perceive color is largely dictated by things like personal preference, experiences, upbringing, cultural differences and context.

That said, using a color/emotion combination is very useful when you’re doing competitive and market research.

Some of these are:

  • Red: Confidence, youth, and power.
  • Orange: Friendly, warm, and energetic.
  • Yellow: Happiness, optimism, and warmth.
  • Green: Peace, growth, and health.
  • Blue: Trust, security, and stability.
  • Purple: Luxurious, creative, and wise.
  • Black: Reliable, sophisticated, and experienced.

Looking at these through the lense of what your competitor brands are trying to convey can help you determine the themes that are prevalent in your market. And as a consequence you can stand out by being different.

You should also keep your brand values in mind here. If your brand is “classy” and values simplicity, you wouldn’t probably go with a hot pink. You’d probably pick black or white.
So start by finding out what’s used in your market and how you want your brand to be perceived.

K.I.S.S. – Keep It Simple (for F*#@’s) Sake

We always come back to this because it works. Principles over tactics.

When picking the colors for your website you should opt for “minimalism”. Using a 10 color palette is only going to complicate things for you and confuse your visitors.

Let’s say you’ve chosen your main brand color based on your values and on what your competitors are doing. If you already have a brand color it’s probably in your company logo. Great, then pick that main color as a starting point for your site.

For our example we’ll go with this green #44AF69.

Next, we’ll use this website to find out the rest of our color palette. Follow the tutorial to get familiar with it, it’s super easy. We are going to lock our green as the first color on the left and then simply press the spacebar until we find a combination that we like.

Our starting point:

Not bad, it could work but we want our brand to be a bit more serious and formal. So we move on keeping in mind these points:

  • Use the color you have (we’ve locked the green)
  • Avoid your competitors’ colors
  • Keep your target audience in mind (think of other sites they visit for example and the colors these use)
  • Don’t go with stereotype colors (i.e. blue and pink for dating apps)
  • You should have one color that stands out more than your base brand color, while the other ones should kind of blend in.

And we end up with this:

We have our green, a nice bold purple (you can see how we locked it too during our search) and some softer greys/greens.
The purple is our action (or accent) color, the color we’ll use for our calls to action, while the green again is our base color (usually what you see in the logo, navigation and footer).
All other colors can be used for decorative elements like icons or for section backgrounds.

Here’s a few other examples of color palettes:


You can see we mention a “Possible secondary action color” here. That’s because, as we’ll see in our next email whenever you need to direct users to a location where they can get more information, you’ll create additional, less prominent (secondary) CTAs. But more on this later.

To recap, your color palette should include:

  • Your base brand color
  • Your primary action color
  • If you need it, a secondary action color
  • Additional supporting colors (if you want to keep it even simpler, just go with whie, a dark and a light grey. Your CTAs will stand out even more).

There you go, you know more about color selection than the 90% of business owners out there. One question still lingers though…

How do you balance these colors in your design to avoid making it look like a unicorn just threw up on the page?

For this we’ll look at how they do it in interior design.
There’s a pretty simple and easy to remember system called “the 60-30-10 rule”. Basically we’ll assign 60% of the design to our base color, a 30% to other supporting colors and the remaining 10% to our action color. By following this principle, you’ll make sure your design is balanced and your CTAs stand out.

Your homework

Follow the steps we outlined above and come up with a simple color palette (4 or 5 colors). Most importantly pick your base color (if you don’t already have it), your action color and a secondary action color. We’ll see how to use them in our next email. Stay tuned.