Colour trends come and go. Companies like Spotify and Instagram are known for their recent use of bright gradients, while companies like SAP and Linkedin play it a bit safer. The first thing to remember when putting a colour scheme together is to remember who the user is. Knowing who your target user and persona is will go a long way to understanding which colour scheme to use in your product. That being said, there are still some guidelines when it comes to this.
Only a very skilled designer can make a lot of different bright colours work together on the same screen. As the designer, your goal is to create an interface that will guide the user through the interface. Colour can play a big role in bringing your interface together while also staying true to the company branding.
How to Pick Colours for your Interface
This article will outline how to take an existing company logo and build a colour scheme for your user interface. When it comes to building an app or a website, and making an interface that is intuitive with controls that attract and guide the user on their journey through the site.
1. Choose Your Primary Colour
This colour is for primary functionality across your website. Buttons, headings, highlighted fields – they’ll all use this colour to create a unified brand across your site. Typically it would be a good idea to match this with the companies main branding colour.
The Primary Colour Should Be a Bright Colour
If possible, the primary colour should be bright. I’ve worked with companies in the past who had grey as their primary branding colour, as this was the colour of the majority of their logo. Grey is a bad choice for the primary colour of a website, because it’s also the colour of an inactive button. Try to see if there is another colour in the companies branding (that is not grey) that can be used as a primary colour for the website.
The Primary Colour Should Be Readable
What I mean by this is that if your primary colour is yellow, yellow text will not work against a white background. If you want to check the contrast of the readability of the primary colour, use the accessibility tool here.
Brands such as Selfridges have managed to use yellow on their website to great effect, by using yellow as the primary colour and black as the text colour on buttons and for iconography. If you’re stuck with yellow or any pale colour, try to see if there are creative ways you can get around it while also maintaining accessibility.
2. Choose Supporting Colours
The next step will be to choose supporting colours for your primary colour. It might be that you could use a shade of the primary colour, or that there is another hue available in the company’s style guidelines.
A Secondary Colour
One of the supporting colours will be your secondary colour. This can be used to offset the use of the primary colour – so if the primary colour is used for the primary buttons and text, the secondary colours are used for the second level headings and the buttons that have lower priority.
It shouldn’t be as bright as the primary colour, because the colours should not compete with each other. The secondary colour needs to be paler, or more neutral, or slightly duller than the primary colour.
An Accent Colour
Another of the supporting colours should be your accent. The accent should be almost opposite of your primary colour, and should stand out. If your primary colour is blue, the accent colour can be orange. The accent colour can be strong, like the primary colour, but it’s use case is very different. The goal of the accent colour is to be used sparingly, and used as a warning, an error message or as a notification of some kind. You should try to use the accent colour is what you will use when you need to break through the noise or the primary and secondary colour.
3. Choose Neutral Colours
To wrap up, you should finally choose a couple of neutral colours. Deliberately choosing the neutrals will make your colour scheme seem complete and give the visual interface coherence. The neutral colours refer to the very dark colours for text and the very light colours for backgrounds.
The neutral colours should reference the primary colour.
The neutral colours should reference the primary colour. If your primary colour is red or orange, the dark neutral colour could be a very dark brown, and the light neutral colour could have orange or yellow tones in it. If your primary colour is blue, the dark neutral colour could be a very dark navy, and the light neutral could be a very pale grey with tones of blue in it. You can always go with completely plain grey colours for these parts of your colour scheme, but just to know that it’s always possible to make these colours support your primary colour also.
A Dark Neutral Colour
This is very dark colour that you will use for the majority of the text, the form elements and for outlines and borders. The dark neutral colour can also be used to create contrast on the website, perhaps using it as the background of the footer, or the background of the navigation.
A Light Neutral Colour
This is very light colour that you will use occasionally for backgrounds. You might find yourself needing a light colour to group elements together and create relief between different parts of a page. The light neutral colour shouldn’t be used for text or even inactive elements, as users should always be able to at least see inactive elements, and read text.
Just as a word of warning – it’s better to either go very dark or very light when it comes to neutral colours. I’ve seen design systems reference middle greys, which ended up being used as colours for text (even though they’re not legible). If you must use a middle grey, specifically state how it should be used, so that it doesn’t end up being used in the wrong way.
Putting it All Together
So at this point you should hopefully have a primary colour, a secondary colour, an accent, a light neutral and a dark neutral. Put them all together to see how they look side by side. The important thing to remember while using these tips is to keep your client in mind. The colours should reflect and support their brand at all times.
There are lots of tools out there that can inspire and help steer you in the right direction, and I’ve listed a few below. Next time you’re using your favourite apps and websites, pay close attention to their use of colours.
https://colorhunt.co/tab/ (one of my personal favourites)
Thanks for reading, I hope this was helpful. As always, the best place to reach me is over on twitter if you have any insights you would like to share. I’m also going to start using instagram soon again, so follow me there if you also have an account.