If you are seeking for approaches to to achieving a well-balanced, visually appealing colour scheme, I would like to recommend the 60–30–10 rule. This approach provides a quick, reliable framework for organising colour that both harmonises and energises an interface. By using 60–30–10 rule, designers can create a sense of balance and focus that enhances the aesthetic of user interfaces.
The 60–30–10 rule is one of the simplest guidelines for creating visually appealing and balanced designs. It provides a clear structure for colour distribution, making it easy to apply to any interface or design layout. With this rule, 60% of colour proposition should feature the primary colour, setting the overall tone and creating a cohesive look. Then, 30% is dedicated to secondary colours, adding supporting the primary colour without overpowering it. Finally, the remaining 10% is reserved for accent colours, adding a pop of contrast to highlight important elements and draw users’ attention.
60–30–10 Rule — Colour Allocation Example 
In my perspective, there are two straightforward ways to effectively apply the 60–30–10 rule to a user interface.
1 — Conventional Approach
60% allocation for dominant colour — giving the interface a bold, branded feel.30% would be used as secondary colour — apply to smaller areas to provide contrast and interest while balancing the dominant colour.10% remains for an accent colour — highlights essential elements, such as call-to-action buttons or alerts.60–30–10 Rule — Approach 01
2 — Flexible Approach
In applying the 60–30–10 rule, if the secondary colour is a neutral tone and provides strong contrast with the dominant colour, I often swap the dominant and secondary colour. This way, the secondary (now the dominant) colour occupies 60% of the interface, giving the design a balanced and clean look, while the original dominant colour still takes up 30% as a secondary colour.
Even with only 30% allocation, the dominant colour maintains brand presence, standing out clearly and representing the brand identity effectively within the design.
60% to the secondary colour as the background — provides a clean, cohesive foundation for the interface.30% to the primary colour — to primary elements, such as components, illustrations, cards and navigation.10% is reserved for accent colours — draws attention to specific details like icons, buttons or highlights.60–30–10 Rule — Approach 02
When applying the 60–30–10 rule, you don’t have to measure colour percentages with exact precision. Instead, it’s more about keeping the general balance in mind: 60% 30% and 10%.
Hope this short article inspires you to create stunning and harmonious user interfaces.
#dinhhuydesign #dinhhuy #pintofdesign
Following me: https://www.dinhhuy.design/
The 60–30–10 Rule: A Simple Way to Creating Catchy User Interfaces was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
