What Is the 60-30-10 Rule?
The 60-30-10 rule is a timeless approach to building well-balanced, visually appealing color schemes in design - whether for interiors, branding, websites, or user interfaces.
Think of it as a design recipe: 60% base, 30% support, 10% spice.
The Formula
- 60% – Dominant color Sets the overall mood and forms the visual backdrop for your design.
- 30% – Secondary color A complementary or supporting shade that adds interest and depth.
- 10% – Accent color The pop! Use this hue to highlight key details and guide user action.
Why Does the 60-30-10 Rule Matter?
- Creates Visual Harmony: Fixed percentages prevent chaos and imbalance.
- Guides Attention: The dominant shade grounds the viewer, the secondary adds contrast, and the accent draws focus to CTAs or interactive elements.
- Simplifies Choices: Reduces color overload and supports a clean, consistent look.
A limited palette used intentionally is more powerful than a rainbow of random hues.
How to Apply the Rule (with UI Examples)
Step 1: Choose Your Palette
Pick three hues:
- A neutral for grounding
- A supporting color for structure
- A statement color for key actions
Step 2: Assign Visual Roles
| Role | Percentage | UI Usage |
|---|---|---|
| Dominant | 60% | Backgrounds, primary surfaces |
| Secondary | 30% | Cards, nav, sidebars, large UI blocks |
| Accent | 10% | Buttons, links, icons, highlights |
Example UI Palette
- 60% – White or light gray background
- 30% – Deep blue cards or navigation
- 10% – Bright orange buttons for “Add to Cart” or “Submit”
This rule doesn’t restrict creativity - it gives it structure.
Real Design Benefits
- Visual Hierarchy: Accents stand out naturally, driving interaction.
- Consistency: The UI looks cohesive across screens and components.
- Accessibility: Fewer colors make contrast testing and WCAG compliance easier.
Best Practices & Tips
- Slight variations are fine, but stay near the 60-30-10 ratio.
- Let accents shine: Reserve bold hues for that 10% impact.
- Don't overcrowd: Too many colors = distraction and confusion.
- Apply this rule not only in UI design but also in branding, decks, and marketing assets.
Minimal color + maximal purpose = professional design.
Conclusion
The 60-30-10 rule is your shortcut to creating beautiful, professional, and functional color palettes - whether you’re designing a website, an app, or a brand.
Let your primary color breathe. Support it with a secondary. Make it memorable with a purposeful accent.