Skip to content

How to arrive at on-brand colours?

Designing for color psychology is tricky

While creating a brand, one of the hardest things to do is to arrive at the right set of colors. Colors are a tricky subject—when done incorrectly, the emotions get mismatched, and in the worst of situations, the brand might just seem all over the place.

Think of the last time you went to a fast food joint. What was the color of the brand? Most probably, it might be a combination of red and yellow. And that’s definitely not a coincidence — research suggests that red or pink occupies 41% of the food industry when it comes to branding.

Red triggers appetite, hunger and stimulation. And when red is combined with yellow, it’s used to convey a sense of quickness (fast food is served fast, expecting the customers to also leave the restaurant fast).

As color plays such a big role in influencing emotions (and sometimes even our appetite), it would be silly to ignore the color palette when it comes to brand design. Having launched multiple products, brands and experiments in the past, this is my current process of arriving at the right set of ‘on-brand’ colors—

  1. Finalise the brand DNA
  2. Finalise the emotion
  3. Finalise the color palette

Finalise the brand DNA

Brand is not just a name, a pallet, and a logo. It’s the emotional response in the minds of the customer. In fact, the word “brand” comes from ranchers identifying their cattle using an unique logo that was branded onto their skin. A brand is not just a mark, it’s a “relationship”.

Under this context, brand DNA, to be simply put, is not a design system, it’s the genome. To understand this further, we could use some handy frameworks that help us think deeply of this “relationship”.

The easiest way to capture this, is through a thought experiment — If the brand were a person, what would the person be? Would it be a friendly person? Shy? Sophisticated? Playful? If the person had a voice, how would that sound like? What would be the style of communication?

Now that we have a rudimentary understanding of the brand persona, we then start describing the persona of the target customer.

Finalise the emotion

For this purpose, understanding the psychographic profile comes in handy—What are the customer’s styles, preferences, brands they love and care about. You want to dig deeper into their motivations, needs and aspirations. (it could even be the cars they aspire to drive)

An important point to note here: psychographic profile is very different from the demographic profile. You are not as keen on understanding the age, country of origin, activities etc, but on a deeper front taking a peak into their psyche: their motivations, needs and aspirations.

Both Ozzy Osbourne and Prince Charles were born in the same year, both stay in castles and are wealthy and famous. That doesn’t make them similar customers. This is a famous meme circulating on the internet illustrating the key issue when only the demographic profile is considered.

Based on the psychographic profile of the customer, and the DNA of the brand, we move to the next step: selecting a color palette.

Why color? The color palette is one of the many elements that would finally comprise the brand, albeit an important step. We would still need to fledge out the typography, proportions (grids and scales), volumes, tone and editorial voice. And these elements go beyond the visual and editorial aspects and touch upon behavioral and experience design pieces.

However, for the sake of restricting the scope of this essay, I will cover the color palette.

Finalise the colors

I first start by collecting inspiration. Dribbble is a handy tool for this purpose as it lets you search by color. It’s easier to find out, however, it lies hidden within the search filter options. 🌈

I then start dropping pieces that resonate well with the brand DNA, and customer psychographic profile, and put the pieces together. I do this in the form of a moodboard. There are also specific tools that could make your job easier when it comes to a moodboard — Milanote is nice, but the billing is slightly expensive. Pureref is one of the best I could find, but sometimes it’s an overkill. I stick to plain old Figma to quickly conjure up a moodboard.

You can also start looking for colour palettes in isolation, but you might miss out on the context in which the palette was formulated. To get a sense of the context while ALSO exploring the colors, I use Happy Hues for this purpose.

Typicality and Novelty

Before I get into the selection of colors in the color palette, I want to take a slight detour into the gestalt theory of aesthetics.

Remember when we were young, and were asked to describe nature and landscapes using crayons. I, like other children of my age, we all did the same thing: we drew two mountains, there was a river flowing right in between the two mountains. There was also the sun rising exactly in between the mountains, and there was a flock of five birds flying together on the right.

This, my friend is too too typical. Everyone has seen this, and is too cliched to call it anything. Quite boring, isn’t it?

Now, if you compare this with the Mona lisa, it’s unique and innovative. Da Vinci experimented with a novel type of painting technique termed sfumato, subtly blending colors and tones to create soft transitions and hazy, smoky effect leading to the enigmatic expression of Mona Lisa—the mysterious smile.

It’s quite novel isn’t it? It however, need not be a Mona Lisa to be called ‘novel’. It could be an innovative painting technique, or even a modification of an existing piece. It just has to be something new—for instance, using a hexagon to represent a futuristic structure or an irregular polygon to symbolize abstract concepts.

Most of the compositions everywhere — be it landscapes, artworks, or even websites come under this axes. It’s either typical or novel, or somewhere in between the two.

Unity and Variety

Now, take an example of your toddler son given a piece of paper for the first time and starts scribbling random things with his crayons and asks you how it is. You would probably say, “great piece of work, son!”, but you might be squirming inside.

It’s too chaotic to call it a drawing. This then comes under the other axes of gestalt theory. ‘Variety’. Anything with too much chaos has a lot of variety.

Now, take three square boxes and place them alongside each other. What do you make of this composition? Isn’t this too plain, simple, cliched and boring? As the shapes of the boxes are also identical, there is a lot of ‘unity’ in this composition.

Unity and Variety come under the other axes of differentiation.

Any composition you can put them in this two-by-two grid. Unity and Variety. Typicality and Novelty.

If it’s too novel, it would be dismissed as avant-garde and too early for the society/culture to accept it. It’s an extreme outlier and sometimes be lucky enough to gain popularity when the society is matured enough to embrace it. The prison escape drama, Shawshank Redemption (1994) and Blade Runner (1982) are some examples of films that achieved cult classic status long after their release. For anything to be a hit, there has to be the right balance of typical and novel, what Paul Hekkert calls as the Most Advanced Yet Acceptable model.

Similarly, if we just use two colors across the whole UI, it has too much of ‘unity’. You need a balanced color palette to spice things up. Here’s how everything adds up:

  1. Unity: Choose a boring, dull color for 70% of the product, which will be used for backgrounds. This color should provide a sense of consistency and cohesion throughout the UI.1
  2. Variety: Select a slightly interesting color for 30% of the product, which will be used for headers. This color should add some visual interest and differentiation to the UI.
  3. Typicality: Opt for a super loud, shiny color for 10% of the product, which will be used for buttons. This color should grab attention and create a focal point for important actions.

Now, for the next step, let’s compare the moodboard created and analyse them in terms of the gestalt principles. How much of unity, variety and typicality is consisting in this piece?

Now that we have the theory in place, let’s come back to how we are translating brand into color. Brand is broken down further into action, verb and emotion to then pair up with the appropriate colors.

Come up with the emotive words — bright, warm, fuzzy, cozy, nostagic? For Tesla it would be — sexy, sustainable. And for Microsoft, the emotive words could be — friendly, faithful etc.

Come up with verbs that make up the company, the noun.

I use this tool to arrive at the appropriate color for the emotion.

One thing to keep in mind while choosing the palette is the context and culture. Color means one thing in one culture, and it could be mean something else in another culture. As a quick example, in the Western world white is more commonly seen as a pure color worn at weddings and festive events, while in China it’s perceived as a mourning color.

  • In the Western and Japanese culture, red symbolizes anger while in Hindu anger is represented by black
  • In Japanese and Hindu culture purple represents wisdom, while for Native Americans you would use brown and for Eastern Europe you’d use the color blue.
  • Love takes on different colors in different cultures too: red for Western and Japanese, green for Hindu, Yellow for Native American and blue for African

Comments