What is the 60-30-10 Rule?
If you struggle with balancing colors in your UI, the 60-30-10 rule is your new best friend. Borrowed from interior design, this simple formula helps you distribute colors in a way that feels natural and pleasing to the eye.
The Breakdown
- 60% Primary Color (Neutral): This is your dominant color. In UI design, this is usually your background color (white, light gray, or dark slate). It sets the tone and provides the canvas.
- 30% Secondary Color (Brand): This supports the primary color. Use it for headers, sidebars, cards, or footer backgrounds. It makes the design interesting without being overwhelming.
- 10% Accent Color (Action): This is your "pop" of color. Use it strictly for call-to-actions (buttons, links, alerts). It guides the user's eye to what matters most.
Why It Works
The rule works because it creates a sense of balance. It prevents "color chaos" where every element is fighting for attention. By limiting your accent color to just 10%, you ensure that your CTA buttons stand out effectively.
Real-World Example
Think of a typical SaaS dashboard:
- 60%: The light gray background of the main content area.
- 30%: The dark sidebar navigation and white cards.
- 10%: The bright blue "Create New Project" button.
Use the UI Colors Lab generator to experiment with this ratio. Pick a neutral, a brand color, and an accent, and see how they play together.