If you’re new here, please subscribe and get insights about product, design, no-code delivered to your inbox every week.

Subscribe now

In yet another edition of The Discourse, where our goal is for you to become a better product person, you have to have more than a basic understanding of a variety of fields. Design is a key one. And one of the most fundamental parts of design is color.

Color hits us before any other visual element because we are hardwired to observe color. Let’s trace back to our hunter-gatherer ancestors. Spotting a red berry on a green bush would mean survival.

As we proceed, we'll talk about how brands use colors for symbolism. But before that let's talk basics:

Color Theory

Color theory is the set of guidelines that inform designers what colors and combinations to use for a specific use case or to evoke a certain emotion.

The color wheel consists of three types of colors — primary (red, yellow, blue), secondary (green, purple, orange), and tertiary that makes up the rest.

How many colors to use in a UI?

In general cases, you should use between 1-3 colors: a primary color, an accent color, and a tertiary color. Avoid going for more than that because the interface gets really busy.

These colors should also be your brand colors, so you can reinforce the brand whenever a user is using the product.

This rule also applies to documents like presentations, profiles, resumes, etc. Posters and graphics can contain more colors.

How to choose color combinations?

There are two ways to do this:

Pick analogous colors. They are colors adjacent to each other on the color wheel; or,
Pick complementary colors. A complementary color is diagrammatically opposite to the selected color. For example, this shade of blue and orange.

I use color-hex to find such combinations. Another alternative is to use colormind.io

While combining objects with different colors

Here’s what you should keep in mind while adding text on top of a colored background:

Avoid vibrating color combinations

Avoid using vibrating color combinations for text. What this means in simple words is conflicting color combinations. The best example is red text on blue or blue text on red. It makes the text difficult to read.

Avoid low contrast between background and object

Don’t use dark text on dark backgrounds. For instance, black on blue background or white text on a light yellow background. There should always be enough visual contrast.

Provide enough visual contrast for the reader to differentiate. I’ve covered this topic in more detail in Principles of Gestalt Psychology.

What colors to choose?

I would personally opt for pastel or muted colors than true colors. In this example, true blue or red is harsh on the eyes.

Dark mode

Dark mode is now universally available as an alternative to the light mode. However, as a product builder, you should not use pure black (⚫ #000000) as the background color for a few reasons:

White text on a black background provides the highest contrast. This causes eye fatigue and halation, which is a blur around the white object.
It causes black smearing, a visual distortion that occurs when lighter content is dragged across pure black backgrounds.

Superhuman has covered this topic extensively in their blog.

Colors in brand logos

I spoke with Fabian Arbor, who is a logo designer. Here’s what he had to say when asked about the thought process behind selecting a color for a logo.

First priority: match it with the brand. Every color has a feeling, and you wouldn’t want something that feels off.
Second priority: make it vibrant. Nobody likes bland colors. Make them stick out.
Third priority: simplicity. Usually all it takes is one or two colors. There’s no need to complicate!

With this in mind, let’s look at what feelings do you want your brand to evoke in the minds of people:

🔵 Blue is trustworthy

Blue makes you feel safe and relaxed. Most logos of technology companies are blue, including Twitter and Facebook. Even though they’ve tried, with anti-trust litigation currently underway, I’m sure you wouldn’t call these two platforms trustworthy.

Example: Facebook, Twitter, HP, Dell

🟢 Green is peaceful

Green is very pleasing to the eyes since it is found abundantly in nature. It symbolizes health and nature.

Example: Spotify, Duolingo, BP

⚫ Black stands for premium

Black feels sophisticated, classic, and serious. It evokes power, elegance, and simplicity.

Example: Superhuman, Notion

🟣 Purple means royal

Purple stands for royalty and luxury. This goes back to the time of Roman emperors when they were the only ones allowed to wear purple togas.

Examples: Hallmark, Cadbury, Purple mattresses

🔴 Red is energized

Red makes you feel passionate. If you want to call out attention to something then use red. Red can also make you angry, so be careful about its usage.

Examples: CNN, Coca-cola, Target, Pinterest, YouTube

🟡 Yellow is optimistic

Yellow makes you feel happy and spontaneous. It’s similar to red in grabbing attention but does not evoke angry emotions.

Examples: Best Buy, McDonalds, Burger King, IKEA

A separate category should be given to Google. They’ve redesigned the logos of Gmail, Google Drive, Google Meet, and others to include all the four colors in its logo. Now all its apps are hard to differentiate.

The Pantone Color Institute has selected Ultimate Gray and Illuminating Yellow for its “Colors of the Year 2021”.

They come together to conjure “deeper feelings of thoughtfulness with the optimistic promise of a sunshine filled day.”

Having said that, colors are powerful in changing perspectives and emotions. I do hope that 2021 brings the optimism that we truly need.

Further reading:

https://mindmeld.substack.com/p/17-how-does-color-influence-our-purchases

📘 Read of the week: We’re not going back - Not Boring by Packy Mccormick. It talks about the first, second, and third-order effects of remote work and why we’re not going back to the status quo. I also learned about the Gartner Hype Cycle through this piece.

📢 Listen of the week: The Tim Ferris Show - Jerry Seinfeld. They talk about Seinfeld’s systems that he uses for his trademark observational style of comedy and more.

That's it for today, thanks for reading! Press the ♥️ button if you liked this edition. Have any questions? Leave a comment below, and I'll be happy to answer them.

Talk to you soon!

— Kavir

P.S. Hit the subscribe button if you liked it! You’ll get insightful posts like this directly in your email inbox every week.

Subscribe now

The Discourse

Color Psychology in Product and Brands – The…