The 60-30-10 Color Rule: Balanced Palettes Made Easy
The 60-30-10 color rule splits a palette into dominant, secondary, and accent colors. Learn how to apply it to websites, UI, and graphics with practical tips.
You picked three colors you love, yet the design still looks noisy. The problem is usually not the colors themselves but how much of each you use. The 60-30-10 rule is a simple ratio that fixes this, and it works for rooms, posters, apps, and websites alike.
What the 60-30-10 rule means
The rule comes from interior design, where decorators have long used it to balance walls, furniture, and accessories. Ideal Home describes it as a way to split a room's palette so no single color overwhelms the space. Designers borrowed the same idea for screens:
60% dominant color. The base that covers most of the surface, usually backgrounds and large areas. It sets the overall mood.
30% secondary color. Supports the dominant color and creates contrast, for example cards, sidebars, or headers.
10% accent color. The small, bold pop that draws the eye, reserved for buttons, links, icons, and key highlights.
The ratio mirrors how our eyes read a scene: a calm base, a clear structure, and one point of focus. The Interaction Design Foundation's guide to color theory explains why contrast and hierarchy matter so much for attention.
How to apply it in UI and web design
1. Start with the 60%
Choose a quiet color for backgrounds. Neutrals such as off-white, light gray, or deep navy are popular because they let content breathe. In the cover image above, a dark blue carries the page.
2. Build structure with the 30%
Use the secondary color for elements that group content: navigation bars, cards, panels, or section backgrounds. It should differ enough from the dominant color to separate areas, but not shout.
3. Save the 10% for action
The accent belongs on the things you want people to click or notice, like the main call-to-action button. If the accent appears everywhere, it stops being an accent. Google's Material Design color system follows a similar logic with primary, secondary, and tertiary roles.
Practical tips that make the rule work
Count neutrals as colors. White, black, and gray can fill the 60% slot. Many clean interfaces are mostly neutral with one brand color as the 30% and a bright accent as the 10%.
Check contrast early. Text on your 60% and 30% colors must stay readable. Test pairs with the WebAIM Contrast Checker, and read our guide to color contrast rules every designer should know.
Use tints and shades. You do not need new hues for variety. Lighter and darker versions of the same three colors keep the palette unified.
Generate options fast. Tools like Adobe Color let you build complementary or analogous sets, then assign them to the 60, 30, and 10 roles.
Squint test it. Blur your eyes or shrink the design. You should still see one main color, one supporting color, and a clear focal point.
When to bend the rule
60-30-10 is a starting point, not a law. Data dashboards may need more colors for charts, and playful brands may push the accent higher. Some designers use 60-30-5-5 to add a second, smaller accent. What matters is keeping a clear hierarchy, which also applies to layout, as explained in our visual composition tips.
Good palettes are less about picking perfect colors and more about giving each color a clear job.
Keep exploring
Color and type work together. Pair this rule with our font pairing tips for a design that feels professional from top to bottom, or see the creative work we build at Ryuartistry.