The 60-30-10 Rule: A Practical Guide to UI Color Theory
ZillyTools Team
Color is one of the most powerful tools in a UI designer's arsenal. It directs attention, establishes brand identity, and communicates state. But picking the right colors isn't just about what looks good—it's a science.
Beyond Just "Making it Look Pretty"
Have you ever looked at a website and felt overwhelmed, but you couldn't explain why? It's usually a lack of color hierarchy. When every button, banner, and text block is fighting for attention, the user loses.
The 60-30-10 Rule Explained
This classic interior design rule applies perfectly to UI design to create a balanced, visually appealing interface.
- 60% Primary Color: Usually a neutral background color (whites, light grays, or dark slates).
- 30% Secondary Color: Used for cards, sidebars, or secondary buttons to break up the primary color.
- 10% Accent Color: Reserved strictly for your primary call-to-action (CTA) buttons and important highlights.
Accessibility is Non-Negotiable
Beautiful colors are useless if your users can't read the text. The WCAG (Web Content Accessibility Guidelines) require a contrast ratio of at least 4.5:1 for normal text.
When you're browsing the web and find a color combination you love, you need to know if it's accessible. Using a tool like Zilly Color Picker allows you to instantly extract the exact HEX codes from any website to analyze their contrast ratios.
"If everything is an accent color, nothing is an accent color. Use your 10% wisely."
The Psychology of Color in UI
Colors carry inherent meaning that users subconsciously process:
- Red: Error, danger, or destructive actions (Delete). Never use red for a "Save" button.
- Green: Success, confirmation, or growth.
- Blue: Trust, security, and stability (which is why every bank and tech company uses blue).
- Orange/Yellow: Warning, or energetic calls to action.
Conclusion
Mastering color theory takes time, but by sticking to the 60-30-10 rule and prioritizing accessibility, you can create interfaces that are both beautiful and functional.
