The 60-30-10 Rule: A Timeless Framework for UI Color

Borrow a simple ratio from interior design to give backgrounds, supporting surfaces, and accents distinct jobs in an interface.

A Simple Starting Point for Color Balance

When faced with a blank canvas and a brand new color palette, the immediate question is: How much of each color should I use?

Using every color in equal proportion can make an interface feel busy. The eye needs a place to rest. The 60-30-10 rule, borrowed from interior design, offers a useful starting point for assigning visual weight. It is a guideline, not a formula that must be measured pixel by pixel.

The Breakdown

The 60%: The Dominant Color

This is your foundational color. It sets the overarching mood and serves as the backdrop for your design. In UI design, this is almost always your background color.

• Light Mode: Usually a shade of white, off-white, or very light gray.
• Dark Mode: A deep gray, navy, or near-black.

The 30%: The Secondary Color

This color provides contrast to your dominant color. It supports the primary narrative of the page while remaining distinctly separate from the background.

• Usage: Cards, sidebars, headers, prominent text, or secondary buttons.
• Purpose: To create depth and visual structure.

The 10%: The Accent Color

This is your splash of vibrancy. It's the color that guides the user's eye to the most critical actions.

• Usage: Primary calls-to-action (CTAs), badges, notification dots, active states, and links.
• Purpose: To command attention without overwhelming the senses.

Why It Works

Separating dominant, supporting, and accent colors makes a visual hierarchy easier to scan. It also gives you a practical way to ask whether an accent has become too common to stand out. The exact percentages matter less than the clear difference between their roles.

Actionable Example

Let's say you're designing a financial dashboard.

• 60%: An off-white background ( #F8F9FA ) to keep the interface feeling clean and trustworthy.
• 30%: A slate gray ( #495057 ) for data cards, navigation panels, and primary text.
• 10%: A vibrant electric blue ( #007BFF ) exclusively for the "Transfer Funds" button and active tab indicators.

Start with these proportions, then test the result with real content. Check text contrast and interaction states separately: the ratio is not an accessibility rule.