60-30-10 Colour Rule for UI: A Simple Guide for Beginners
Have you ever visited a website and felt that it looked beautiful and professional, even though you couldn't explain why?
On the other hand, have you seen websites that felt messy, confusing, or difficult to look at?
Most of the time, the difference is not the design itself. It is the colour balance.
One of the easiest and most powerful design principles used by professional UI/UX designers is the 60-30-10 Colour Rule.
The best part? You don't need to be a designer to understand it.
In this article, I will explain the 60-30-10 colour rule in the simplest possible way using real-life examples that even a child can understand.
What is the 60-30-10 Colour Rule?
The 60-30-10 Colour Rule is a design principle that helps create a balanced and visually appealing user interface.
It divides colours into three parts:
60% Primary Colour
30% Secondary Colour
10% Accent Colour
Think of it like making a delicious biryani.
The rice takes up most of the plate.
The curry comes next.
The pickle is used in a small amount.
Too much pickle will ruin the taste.
Similarly, too much accent colour can ruin your design.
[post_quote]
60% Primary Colour + 30% Secondary Colour + 10% Accent Colour = Balanced Design
[/post_quote]
Why is This Rule Important?
Without colour balance, users become confused.
Their eyes don't know where to look.
Important buttons get lost.
Content becomes harder to read.
A good colour balance helps users:
Understand the interface quickly
Focus on important elements
Enjoy the overall experience
Stay longer on the website
This is why most successful apps and websites follow some form of this rule.
Understanding the 60% Primary Colour
The primary colour occupies most of the screen.
Usually, this colour appears in:
Backgrounds
Large sections
Main containers
Page layouts
Imagine your bedroom.
The wall colour covers most of the room.
That is your 60%.
Example
For a modern tech website:
60% White (#FFFFFF)
or
60% Light Grey (#F5F5F5)
Many popular websites use white because it makes content easy to read.
[post_note]
The primary colour should be calm and comfortable for the eyes.
[/post_note]
Understanding the 30% Secondary Colour
The secondary colour supports the primary colour.
It appears in:
Cards
Sidebars
Navigation menus
Content sections
Think of your school uniform.
Your shirt may be white.
Your pants may be blue.
The blue colour acts as the secondary colour.
Example
If the primary colour is:
White
Then the secondary colour may be:
Dark Blue
This creates a professional and trustworthy look.
Understanding the 10% Accent Colour
This is the most exciting part.
The accent colour is used to attract attention.
It appears in:
Buttons
Call-to-action sections
Important notifications
Links
Highlights
Think about traffic signals.
The red light immediately catches your attention.
That's exactly what an accent colour does.
Example
If your design uses:
60% White
30% Dark Blue
You can use:
10% Orange
for:
Sign Up button
Subscribe button
Contact button
This makes important actions stand out.
Real-Life Example 1: INVODES Blog
Let's take the INVODES blog as an example.
60%
White Background
30%
Dark Navy Blue
Used in:
Header
Footer
Navigation
10%
Bright Blue
Used in:
Buttons
Links
Hover Effects
This creates a modern technology-focused appearance.
Real-Life Example 2: YouTube
YouTube follows a similar concept.
60%
White
30%
Light Grey
10%
Red
The red colour immediately grabs attention.
That is why the Subscribe button stands out.
Real-Life Example 3: WhatsApp
WhatsApp also uses colour balance effectively.
60%
White
30%
Light Green
10%
Dark Green
Important actions become easy to identify.
Common Mistakes Beginners Make
Using Too Many Colours
Many beginners use:
Red
Blue
Green
Purple
Yellow
Orange
all in one design.
This creates confusion.
Try to limit yourself to three main colours.
Making Everything Important
If every button is bright red, then nothing is important.
Accent colours work only when used sparingly.
Ignoring Contrast
Never place:
Light Grey Text
on
White Background
Users will struggle to read it.
Always ensure good contrast.
[post_note]
Good design is not about adding more colours. It is about using fewer colours more effectively.
[/post_note]
How to Choose Colours for Your UI
A simple formula:
Technology Websites
60% White
30% Dark Blue
10% Bright Blue
Finance Apps
60% White
30% Dark Grey
10% Green
E-Commerce Stores
60% White
30% Light Grey
10% Orange
Education Platforms
60% White
30% Blue
10% Yellow
These combinations are popular because they create trust and clarity.
My Personal Experience
When I first started learning web design, I believed adding more colours would make my projects look attractive.
The result was the opposite.
My websites looked crowded and unprofessional.
Once I started following the 60-30-10 colour rule, everything became easier.
The designs felt cleaner.
Buttons became more noticeable.
Users could navigate the interface without confusion.
Sometimes the simplest design principles create the biggest improvements.
Final Thoughts
The 60-30-10 Colour Rule is one of the easiest ways to improve your UI design.
Remember:
60% Primary Colour
30% Secondary Colour
10% Accent Colour
This simple formula helps create balance, improve readability, and guide users towards important actions.
Whether you are building a personal blog, a portfolio, a business website, or a mobile application, this rule can make your design look more professional instantly.
Have you tried using the 60-30-10 Colour Rule in your projects? Share your thoughts in the comments below.
If you found this article helpful, share it with your friends on social media and help more people learn UI design principles.
Don't forget to subscribe to INVODES for more practical articles on UI/UX Design, Web Development, AI, Cybersecurity, and Digital Growth.