How to define and choose the right colours for your brand or website
Last week I was asked by a designer “How do you define and choose the right colours of a brand?”
As I thought how to answer this question, my mind wandered into how many designers pick colours their brand colours based on other brands they admire? How many designers choose colours but can’t explain how they came up with their colour palette?
Colour is a powerful force in a designers toolkit. It evokes emotions, draws eyes and conveys meaning. To illustrate this, 90% of snap decisions to buy a product are based on colour alone.
So effectively using colour is important to designs. But coming up with different colour combinations is also hard. Each colour has its own meaning, and there is an infinite number of combinations out there.
This article is my process for choosing a colour palettes. Use it as a guide to start defining a process for choosing the right colour palette for your next brand or website.
Content:
- Know and understand the fundamentals — Color theory.
- Create a list of colours that align with the brand values.
- Choosing the right colour palette + our favourite websites.
- Creating a colour language for your brand.
If this doesn’t entice you read through my article, skim through to the end to for a link to my colour template!
Know and understand design fundamentals — Colour theory.
When choosing a colour palette, it’s sometimes helpful to know a little colour theory. What is colour theory? Colour theory is a logical structure and practical guide for mixing colours. It encompasses everything from the colour wheel to the meaning behind individual colours.
Read more on colour theory here and here.
Create a list of colours that align with your brand values
Choosing the right colour palette — The fun part!
Find colour inspiration from websites, photography and posters to get the right colour palette. My favourite sites to find colour inspirations are Behance, Dribble, Muzli and Uplabs. To choose the right colour palette my favourite websites are; coolors.com, picular.co (my new favourite), materialui.com/colors, huesnap.com, color.adobe.com, flatuicolorpicker.com
Creating a colour language for your brand
After choosing my colours, it’s time to create a colour language which is part of the design language of the brand or the style guide. In my colour language, I define my Primary colours, Secondary/Accent colours, Gradients, typography colours and background colours.
The primary colour is the colour you most often use for important buttons and accents. For many companies, this is also the colour of their logo. The secondary colour is the colour I use to differentiate secondary actions from primary ones.
Tip: Personally I find it useful to answer the following questions when choosing my colour palette
- What colours are accessible?
- What colours have visual impact and draw your eye?
- Am I using a light or dark colour scheme? What time of the day will people use this product?
- What mood do I want your design to convey? Do I have a colour palette that does this better than the others?
One step ahead — create colour shades
I like to be one step ahead by defining shades of my primary, secondary and typography colours. Why I hear you ask? The shades come in handy when establishing a visual hierarchy in your designs using colour.
I use coolors.co to get the right colour shades, simply click the toggle icon to colours as shades.
Update: If you want to go nerdy on shades or tones of your colours use Hue, Saturation and Lightness (HSL)method. Once you have settled on the hue of a colour play with the lightness value to get different shades.
All together for the TL;DR crowd!
- Know your fundamentals — learn and understand about colour theory.
- Create a list of colours that speak to the brand values.
- Find inspiration for your colour palette online —Behance, Dribble, and Uplabs.
- Free websites to choose and filter the right colour palette — coolors.com, picular.co (my new favourite), materialui.com/colors, huesnap.com, color.adobe.com, flatuicolorpicker.com
- Create a colour language; Primary colours, Secondary/Accent colours, Typography colours, background colours.
- Be one step ahead by defining colour shades for your Primary colours, secondary colours and typography colours. You’ll thank me later!
Download my colour style guide kit here
This article was first published on our website www.akiliplus.com. AkiliPlus is an online school helping designers in Africa to teach and learn UX design.
