Colour, like everything else, is best used in moderation. You are more likely to get better results if you stick to a maximum of three primary colors in your colour scheme.
Applying colour to a UI design project has a lot to do with balance, and the more colours you use, the harder this becomes.
What is The 60–30–10 Rule?
Within interior design, the 60–30–10 rule is an age-old decorating technique that can help you put a colour scheme together more seamlessly.
The 60% + 30% + 10% proportion is meant to give balance to each of the primary colours you have selected. This formula works to create a sense of balance and allows the eye to move comfortably from one focal point to the next.
It is also pretty simple to use.
60% is your dominant hue, 30% is secondary colour and 10% is for accent colour.
So keep the 60–30–10 rule in mind when it comes to distributing colour on your UI.
Does Colour Have Meaning in UI?
Scientists have studied the physiological effects of colours for centuries. Besides aesthetics, colours evoke emotions and associations.
The meaning of colours can vary depending on culture and circumstances. For example red in certain Asian cultures means long life, fertility, and luck. While within Europe it can be linked to danger, love and even Christmas.
In UI design, colour can heavily reflect the personality of your brand. They can even attract users to do certain things, highlight important call-to-actions and even set the mood of certain products or services.
3 Helpful Tips for Using Colour in UI Design
Utilising colour in your UI design is a no-brainer. However, getting started can be a daunting task.
To help you get to grips with using colour in UI design, we have put together 3 helpful tips for you to use.
1. Think in Greyscale First
As designers, we like to play with colour early in our designs, but this can be distracting especially when it comes to creating wireframes.
If we work in greyscale, we can more easily focus on spacing and laying out the elements. This helps us ensure that the flow of the content works before we move on to colouring it in.
2. Keep the Contrast
Some colours go well with each other, while others clash. This is known as “contrast”.
Using it wisely can go a long way in catching your user’s attention and directing them to particular elements you want them to see. It can even help users with navigation and usability.
3. Use Colour Palette Tools
There are definitive rules for how colours should interact that can be best understood by using a colour wheel.
You should ideally be aware of and understand these methods, but thankfully we no longer have to do this manually as there are many handy online tools.
What Are the Best Tools for Choosing UI Colour Palettes?
To make things easier, I’ve rounded up some of the best online tools for choosing colour palettes. Trust me, they will save you a lot of time!
Coolors.co
Coolors is definitely my favorite tool for picking colours.
You can simply lock a selected colour and press space to generate a palette. Coolors also gives you the ability to upload an image and make a colour palette from it.
The cool thing about this tool is that you are not limited to just one outcome. Instead, you have a “picker” that allows you to modify reference points.
Adobe Color
This tool from Adobe has been with us now for a long time.
It is available in both browser and desktop versions. If you’re using the desktop version, you can even export a colour scheme directly into your Photoshop.
Paletton
Paletton is very similar to Adobe Color. However, the biggest difference is that you are not limited to only 5 tones.
It’s the perfect tool for when you have primary colours and additional tones that you want to play around with.
UI Experts
If you need expert advice on how to improve the UI of your site, or need a digital agency that specialises in Web Design, contact the EHD team today.
