Make most of a screen calm and neutral, and spend colour only where you want attention.
60% dominant (neutral), 30% secondary, 10% accent. Ratios create visual calm.
The 60-30-10 rule is a rule of thumb borrowed from interior design, where it keeps a room balanced: one dominant colour on most surfaces, a supporting colour for furniture and structure, and a small accent for the finishing touches. Designers carried it into interfaces because the problem is the same. It is a guideline for balance, not a measured law, so treat the numbers as a starting point.
Ration the accent to about a tenth of the surface and the one thing that matters finally stands out.
Most pixels should be neutral. Saturated color earns attention only on the 10%.
Look at Stripe or Linear: most of the screen is neutral, a secondary tone carries the structure, and a single saturated colour marks the one thing you should do next. Because colour is rationed, the primary button actually stands out. A dashboard that paints every card its own bright colour has no accent left, so nothing leads the eye and everything competes for it at once.
UX Quest is a dark interface. The near-black background (#0B0B0B) carries most of the screen, charcoal panels (#121212) give it structure, and one blue is kept for things you can click or that are active. We hit the limit of the rule ourselves: white text on that blue measures about 3.4 to 1, below the 4.5 to 1 that normal text needs, so our blue buttons use dark text (about 5.7 to 1) and large surfaces stay charcoal instead of solid blue. We also bend the rule on purpose: a few small colours carry meaning, orange for streaks, amber for XP and icy blue for streak freezes, so they sit outside the single accent.
Expressive, brand-forward surfaces (a marketing splash, an event page, a playful consumer app) can break the ratio on purpose for energy. Data visualisation follows its own rules too: a chart needs enough distinct hues to separate its series, which is a different job than composing one calm interface.
Blur your screen or step back from it. You should still see the same structure and find the primary action in about a second. Then run each text and accent colour through a contrast checker.
A colour-balance guideline: about 60% of the interface in a dominant colour, 30% in a secondary colour, and 10% in an accent. In UI that usually means a neutral background, a supporting tone for structure, and one accent reserved for the main action.
No. They describe a balance, not a measurement. What matters is that one colour dominates, one supports, and the accent stays rare enough to stand out.
The same way, with dark neutrals. Let a near-black or charcoal background be the 60, a slightly lighter surface the 30, and keep the accent for actions. Check contrast again, because light text on dark and bright accents behave differently from a light theme.
Usually yes, for the main brand accent. Status colours such as error red or success green are a separate system: they carry meaning and are used sparingly, not as decoration.
Only partly. Charts need enough distinct hues to tell series apart, so keep the 60-30-10 balance for the surrounding interface and let the data use its own palette.
A SaaS team shipped a dashboard using all eight brand colors at equal strength. Everything competes for attention, so nothing wins — users can't find the primary action in the noise.