How to arrive at on-brand colours?

Shreyas Prakash headshot

Shreyas Prakash

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

Subscribe to get future posts via email (or grab the RSS feed). 2-3 ideas every month across design and tech

Read more

  1. Breadboarding, shaping, slicing, and steelthreading solutions with AI agentsproduct-management
  2. How I started building softwares with AI agents being non technicalagentic-engineering
  3. Legible and illegible tasks in organisationsproduct
  4. L2 Fat marker sketchesdesign
  5. Writing as moats for humanswriting
  6. Beauty of second degree probesdecision-making
  7. Read raw transcriptsknowledge
  8. Boundary objects as the new prototypesprototyping
  9. One way door decisionsproduct
  10. Finished softwares should existproduct
  11. Essay Quality Rankerobsidian
  12. Export LLM conversations as snippetsbrowser-extension
  13. Flipping questions on its headinterviewing
  14. Vibe writing maximswriting
  15. How I blog with Obsidian, Cloudflare, AstroJS, Githubwriting
  16. How I build greenfield apps with AI-assisted codingai-coding
  17. We have been scammed by the Gaussian distribution clubmathematics
  18. Classify incentive problems into stag hunts, and prisoners dilemmasgame-theory
  19. I was wrong about optimal stoppingmathematics
  20. Thinking like a ship
  21. Hyperpersonalised N=1 learningeducation
  22. New mediums for humans to complement superintelligenceai-coding
  23. Maxims for AI assisted codingai-coding
  24. Personal Website Starter Kitai-coding
  25. Virtual bookshelvesaesthetics
  26. It's computational and AI everythingai-coding
  27. Public gardens, secret routesdigital-garden
  28. Git way of learning to codeai-coding
  29. Kaomoji generatorsoftware
  30. Copy, Paste and Citecuriosities
  31. Style Transfer in AI writingai-coding
  32. Understanding codebases without using codeai-coding
  33. Vibe coding with Cursorai-coding
  34. Virtuoso Guide for Personal Memory Systemsmemory
  35. Writing in Future Pastwriting
  36. Publish Originally, Syndicate Elsewhereblogging
  37. Poetic License of Designdesign
  38. Idea in the shower, testing before breakfastsoftware
  39. Technology and regulation have a dance of ice and firetechnology
  40. How I ship "stuff"software
  41. Weekly TODO List on CLIcli
  42. Writing is thinkingwriting
  43. Song of Shapes, Words and Pathscreativity
  44. How do we absorb ideas better?knowledge
  45. Read writers who operatewriting
  46. Brew your ideas lazilyideas
  47. Vibescreativity
  48. Trees, Branches, Twigs and Leaves — Mental Models for Writingwriting
  49. Compound Interest of Private Notesknowledge
  50. Conceptual Compression for LLMsai-coding
  51. Meta-analysis for contradictory research findingsdigital-health
  52. Beauty of Zettelswriting
  53. Proof of workproduct
  54. Gauging previous work of new joinees to the teamleadership
  55. Task management for product managersproduct
  56. Stitching React and Rails togetherai-coding
  57. Exploring "smart connections" for note takingknowledge
  58. Deploying Home Cooked Apps with Railssoftware
  59. Self Marketing
  60. Repetitive Copypromptingwriting
  61. Questions to ask every decadejournalling
  62. Balancing work, time and focusproductivity
  63. Hyperlinks are like cashew nutswriting
  64. Brand treatments, Design Systems, Vibesdesign
  65. How to spot human writing on the internet?writing
  66. Can a thought be an algorithm?product
  67. Opportunity Harvestingcareers
  68. How does AI affect UI?design
  69. Everything is a prioritisation problemproduct-management
  70. Nowlifestyle
  71. How I do product roastsproduct
  72. The Modern Startup Stacksoftware
  73. In-person vision transmissionproduct
  74. How might we help children invent for social good?social-design
  75. The meeting before the meetingmeetings
  76. Design that's so bad it's actually gooddesign
  77. Breaking the fourth wall of an interviewinterviewing
  78. Obsessing over personal websitessoftware
  79. Convert v0.dev React to Rails ViewComponentsrails
  80. English is the hot new programming languagesoftware
  81. Better way to think about conflictsconflict-management
  82. The role of taste in building productsdesign
  83. World's most ancient public health problemsoftware
  84. Dear enterprises, we're tired of your subscriptionssoftware
  85. Products need not be user centereddesign
  86. Pluginisation of Modern Softwaredesign
  87. Let's make every work 'strategic'consulting
  88. Making Nielsen's heuristics more digestibledesign
  89. Startups are a fertile ground for risk takingentrepreneurship
  90. Insights are not just a salad of factsdesign
  91. Minimum Lovable Productproduct
  92. Methods are lifejackets not straight jacketsmethodology
  93. How to arrive at on-brand colours?design
  94. Minto principle for writing memoswriting
  95. Importance of Whytask-management
  96. Quality Ideas Trump Executionsoftware
  97. How to hire a personal doctor
  98. Why I prefer indie softwareslifestyle
  99. Use code only if no code failscode
  100. Personal Observation Techniquesdesign
  101. Design is a confusing worddesign
  102. A Primer to Service Design Blueprintsdesign
  103. Rapid Journey Prototypingdesign
  104. Directory Structure Visualizercli
  105. AI git commitscli
  106. Do's and Don'ts of User Researchdesign
  107. Design Manifestodesign
  108. Complex project management for productproducts
  109. How might we enable patients and caregivers to overcome preventable health conditions?digital-health
  110. Pedagogy of the Uncharted — What for, and Where to?education
  111. Future of Ageing with Mehdi Yacoubiinterviewing
  112. Future of Equity with Ludovick Petersinterviewing
  113. Future of Mental Health with Kavya Raointerviewing
  114. Future of Tacit knowledge with Celeste Volpiinterviewing
  115. Future of Rural Innovation with Thabiso Blak Mashabainterviewing
  116. Future of unschooling with Che Vanniinterviewing
  117. Future of work with Laetitia Vitaudinterviewing
  118. How might we prevent acquired infections in hospitals?digital-health
  119. The soul searching yearsentrepreneurship
  120. Design education amidst social tribulationsdesign
  121. How might we assist deafblind runners to navigate?social-design