Everything required in the colour palette for a UI design| Colour Theory Pt-5
What colours make a colour palette for UI design based on the colour psychology and standards.
Any good UI design requires following sets of colours in order to provide the visual hierarchy, aesthetics and uniformity.
Primary Colour
Dominant and most used colour in UI.
Select the base colour with the brand’s colours. For example, for KFC the base colour could be the red used in its logo.
What if there is no colour for the brand yet? Follow these steps to choose the brand’s primary colour:
List the characteristics of the brand.
Think about what colours connect to the idea behind the brand using colour psychology.
For example, a company offering organic products or eco friendly products could use green. Create variants in the primary colour by adjusting that colour’s attributes like saturation and value.
Most of the time we choose a colour and are satisfied, but when combined with other colours it might not look great. So combine the primary colour with the other colours based on the contrast ratio, values, etc and make adjustments as required.
Secondary Colour
It’s an optional set of colours to make your design a little more interesting.
Pick the secondary colour based on the colour scheme. You can use it to distinguish the selected option and unselected option.
Accent colours
It’s used to emphasise actions and highlight information
Example: texts, buttons or call to action, slider, links, progress bar, etc.
Use colour harmonies to create the accent colour.
Thumb rule to pick the accent colour 😉
increase or decrease the hue by 30 to 40 points
now increase the brightness by 5 to 10 points
Your accent colour is ready
Semantic Colours
They are used for warning, error, success and information.
Yellow: Warning
Red: Error
Green: Success
Blue: Information
Once these 4 colours are ready, we can use monochromatic colour harmony to create variants.
Background Colours
Background colours have to be chosen wisely as they help pop other colours on the UI.
Background colours need not be just limited to light/dark colours, but could also be the primary colours itself as long as it is not too vibrant.
Or choose the primary colours and decrease the saturation and increase the brightness to get a good background colour. For instance, set saturation = 2 to 8, brightness = 95 to 100
Background colours can also be neutral colours.
Neutral colours
Neutral colours are guaranteed to work well as the background colours.
Neutral colours are White, Black, or Greyscale.
They let all other colours pop in the design.
Chart and Data Visualisation colours
A set of colours specifically used for charts, heatmaps and treemaps.
Create a set of 10–20 colours in a palette following the guidelines below.
Guidelines to create:
Categorical Colour Scheme
- Contains multiple colours which contrast to each other in certain order.
- Good for bar charts, line charts, etc.
- Use the colour to present the each data point distinctively.Sequential Colour Scheme
- Gradual transition of colours from dark to light and vice versa
- Suitable for heatmap and treemapDiverging Colour Scheme
- Gradual transition of colour from one hue in left end dark to light in the middle to another contrasting hue from light to dark in the right end.
- Used to represent negative to positive values
- Don’t use it for categorical scales.
Bonus recipe
How to apply a colour palette to your design?
The rule to apply the chosen colour in your design is 60:30:10 ratio.
60% of UI to have the primary colour.
30% of UI to have the secondary colour.
10% of UI to have the accent colour.
Next Steps
To understand this better, try observing some of the websites that you use daily and identify the primary, secondary, accent, semantic, background colours used in it, if available also the colour scheme used for the charts in the website.
In the upcoming blog we will see about colour scale, how to create colour gradients, colour accessibility and some tools to create a colour palette!
References and useful resources
Skillshare course by Arash Ahadzadeh — Create Amazing Color Schemes for Your UI/UX Design Projects
Figma for design.
Youtube Channel by Ran Segall: https://www.youtube.com/c/FluxWithRanSegall
Youtube Channel — PiXimperfect
https://www.empower-yourself-with-color-psychology.com/