Dominant, Secondary, Accent

Interior designers discovered it in room composition. Graphic designers reinforced it in print. UI designers apply it on screens. The principle is the same regardless of medium: a composition needs one dominant presence, one supporting presence, and one element of emphasis. Not equal quantities of each — a clear hierarchy of proportion that lets the eye navigate without confusion.

The 60-30-10 principle

In the 60-30-10 rule, the dominant colour covers approximately 60% of the visual field, the secondary colour covers 30%, and the accent colour covers 10%. These proportions are approximate and should be understood as a ratio rather than a precise measurement — the point is that they’re unequal and that the inequality is large.

The dominant colour is almost always neutral: white or off-white for light interfaces, near-black or deep-navy for dark ones. Neutrals can occupy large areas without creating visual fatigue. A dominant area of vivid red or saturated blue would be exhausting to use. The secondary colour provides structure — navigation backgrounds, sidebar surfaces, card backgrounds, section dividers — and is typically a mid-tone that complements the dominant. The accent is the brand or interactive colour: buttons, links, highlights, active states, and key data points.

Choosing your dominant

For most web interfaces, the dominant colour is a decision about surface colour: how light or dark, how warm or cool. Pure white (#ffffff) is clinical and can feel harsh against the black text that most typography requires. A warm off-white (#fafaf9 or hsl(40, 5%, 98%)) can read as softer and less clinical than pure white, though the effect is subtle and context-dependent. A cool near-white (#f8fafc) reads as technical and clean. The difference is subtle but cumulative — it sets the character of everything that sits on top of it.

Dark interfaces use deep colours as their dominant. The best dark mode surfaces are not pure black but deep navy, warm near-black, or cool charcoal: colours that absorb surrounding hues while providing a rich foundation. On OLED screens, pure black (#000000) creates display artefacts — the “blooming” effect where black pixels adjacent to bright ones produce a visible halo. On LCD screens, pure black is fine; the preference for near-black is aesthetic rather than technical.

The role of the accent

The accent colour should appear infrequently enough that it retains its power to signal importance. A vivid amber button is visually commanding against a grey interface because amber doesn’t appear anywhere else. If amber is also used for decorative borders, background tints, icon fills, and section dividers, it stops reading as “action” and starts reading as “theme.” The button no longer commands attention — it just participates.

Reserve the accent for moments where you genuinely need the user’s attention: primary calls to action, interactive states, critical data, and emphasis that creates clear hierarchy. When the accent is genuinely rare, it works. This is the principle behind design systems that limit bright colour to 5% or less of the visual area — even less than the 10% in the formal rule.

Common failures

Using two accents is the most common error. The second accent either competes with the first (both read as “important,” so neither does) or reads as a different semantic category (the user infers two different meanings). If you genuinely need a second level of emphasis, make the second accent a tint or shade of the primary accent — not a different hue. If you need a second category (say, a success state versus a call-to-action), name those categories explicitly and assign distinct colours with clear semantic meaning, as discussed in colour in UI systems.

The second common failure is letting the accent multiply — it starts as a button colour, then someone adds it to links, then to dividers, then to background tints, and within a year it appears in 40% of the interface. Document the constraint: accent colour is for interactive primary states and emphasis only. Everything else uses the neutral family.