The 60-30-10 rule is a color guideline borrowed from interior design and applied to digital interfaces. It's not a groundbreaking concept, but it's genuinely useful, and most designers reach for it whether they're doing UX work or broader product design.

The split looks like this:

That ratio creates visual hierarchy, directs attention, and keeps interfaces from feeling like a mess.

The dominant color covers 60% of the design. Usually it's a neutral, white, light gray, or whatever background tone fits the brand. Its job is to set the mood and give everything else room to breathe.

The secondary color fills 30% and typically shows up on surfaces, cards, sidebars, and secondary UI elements. It adds some depth without fighting for attention.

The accent color is where things get interesting. At just 10%, it's the most consequential color in the system. This is your brand's action color: buttons, links, interactive highlights. Because it appears so rarely, the eye finds it automatically. That's the whole point. Scarcity does the work.

Product designers and UX designers both use this rule, but they tend to care about it for different reasons. Product designers usually fold it into a design system to keep color consistent across an entire product. UX designers are more likely to apply it during high-fidelity prototyping to check whether the visual hierarchy actually supports usability. Same rule, different questions being asked of it.

It's also worth saying: the 60-30-10 rule is a starting point, not a law. Brand guidelines, accessibility contrast requirements, and the emotional tone a product needs to hit will all push you away from a strict split. Plenty of good interfaces break the ratio entirely. What the rule really teaches is proportion and restraint, and those lessons hold even when the specific numbers don't.