60%
Dominant Color
Your primary background color. Sets the overall mood and creates visual foundation. Usually a neutral or muted tone — walls, large surfaces, main backgrounds.
In UI design: Page background, card backgrounds, large content areas
The 60-30-10 Rule
Professional color distribution technique
The 60-30-10 rule is a timeless design principle borrowed from interior design. It provides a simple formula for distributing colors in a way that feels naturally balanced and visually appealing.
Visual Breakdown
60%
Dominant
30%
Secondary
10%
Accent
Understanding Each Layer
30%
Secondary Color
Creates visual interest and supports the dominant color. More saturated or contrasting — furniture, architectural elements, section dividers.
In UI design: Headers, sidebars, secondary buttons, navigation, borders
10%
Accent Color
Your pop of energy. Draws attention to key elements. Typically your most vibrant color — artwork, cushions, decorative objects.
In UI design: CTAs, notifications, badges, links, active states, icons
Real-World UI Example
Dashboard
60% Base 30% Secondary 10% Accent
Pro Tips
- →The percentages are guidelines, not laws. Adjust based on your design needs.
- →In dark mode, your "dominant" becomes dark tones instead of light.
- →Your accent should have the highest contrast — it's meant to pop.
- →You can have multiple accent colors, but keep total accent under 15%.