The 60-30-10 Rule

A timeless interior design principle that translates perfectly to UI design. Master the art of balanced color distribution for harmonious, professional designs.

Color Distribution

60% Dominant Color Primary background, main surfaces
30% Secondary Color Supporting elements, cards, sections
10% Accent Color CTAs, highlights, important elements

The 60-30-10 rule creates visual hierarchy and balance. The dominant color sets the tone, the secondary color adds interest, and the accent color directs attention to key actions.

Interactive Generator

Enter your colors below to see the 60-30-10 rule in action

Your Design Preview

See how your colors work together with proper distribution

This section represents your 30% secondary color. It provides visual interest and breaks up the dominant color.

Call to Action

Real-World Examples

Professional SaaS

Clean and trustworthy

Modern SaaS Dashboard
#FAFAFA
#1A73E8
#34A853

Artisan Brand

Warm and authentic

Organic Coffee Shop
#FFF9F0
#8B5E3C
#D4A373

Financial Platform

Stable and secure

Fintech Application
#F0F4F8
#1E3A5F
#2DD4BF