What 60, 30, and 10 actually mean
The percentages describe visual share, not a pixel audit. Around 60 percent creates the dominant atmosphere, 30 percent establishes a secondary layer, and 10 percent directs attention. A room might map those roles to walls, furniture, and accessories; an interface might map them to canvas, panels, and interactive emphasis.
Because visual weight differs, area is not the only variable. A tiny saturated red button can command more attention than a much larger pale blue panel. Read the numbers as a reminder to create unequal hierarchy, then adjust for saturation, contrast, position, motion, and meaning.
Translate the rule into interface roles
For a light product, the 60 percent family may be the page canvas and open space. The 30 percent family can include cards, navigation, charts, or illustration fields. The 10 percent accent should usually identify a small number of high-value interactions, not decorate every icon.
Text does not fit neatly into one percentage because it may cover little area while carrying most of the information. Treat readable text and focus as requirements outside the decorative allocation. Never reduce their contrast to preserve a ratio on a mood board.
- Dominant: canvas and broad quiet surfaces
- Supporting: cards, sections, illustration fields
- Accent: primary action, selected item, critical highlight
- Requirements outside the ratio: readable text, focus, semantic status
Choose the accent last
Set the broad dominant color first because users will see it for the longest time. Add a supporting family that creates enough boundary without fragmenting the layout. Only then choose an accent that is distinct from both and remains usable for its intended role.
The accent does not have to be the most saturated RGB value; it only needs to be the strongest attention signal in context. A near-black action on a pale pastel page may function as the 10 percent color. In a dark interface, a modest warm cream can become the visual accent.
Know when to bend or abandon it
Dense dashboards, data visualizations, accessibility themes, and content-led pages may need different allocations. A chart with several categories requires multiple distinct marks. A reading experience may be 90 percent paper and 10 percent everything else. A campaign landing page may intentionally use two large opposing fields.
Keep the underlying question: which family establishes place, which supports structure, and which pulls action? If every region still competes, the answer is not necessarily to force exact percentages; reduce unnecessary hues, lower a supporting color’s chroma, or reserve the accent more carefully.
Review visual weight at three distances
First zoom out until text is unreadable. The broad dominant and supporting masses should still be clear. Then view at normal size and follow the intended task: the accent should guide without interrupting every step. Finally zoom in or inspect individual components to confirm contrast and state differences.
Repeat on mobile. A desktop side panel that represented 30 percent may become a full-width block and dominate the phone. Responsive design changes proportions, so the same tokens may need different placement or reduced accent frequency at narrow widths.
60–30–10 review checklist
- One family clearly dominates the broadest areas.
- The supporting family creates structure without equal competition.
- The accent is reserved for a small set of intentional moments.
- Text and focus contrast were treated as requirements, not percentages.
- Visual weight—not only pixel area—was considered.
- The balance was reviewed again on mobile.
- Breaking the ratio has a task-based reason.
Frequently asked questions
Do the percentages have to add up exactly?
No. The rule is a composition heuristic, not a measurement standard. Its value is creating unequal hierarchy and disciplined accent use.
Can neutral colors count as the 60 percent?
Yes. A white, cream, gray, or near-black canvas often makes the most durable dominant family while color is concentrated in supporting and accent roles.
Does the accent have to be bright?
No. It needs to attract the right amount of attention relative to its surroundings. A dark or low-chroma color can be the accent in a very light, quiet composition.