blog post
blog post
blog post
How to Use the 70–20–10 Colour Rule in Interface Design
This post has been created with the help of Artificial Intelligence.
Key Takeaways
The 70–20–10 colour rule is a practical framework that divides an interface into a dominant base colour, a supporting colour and a smaller accent colour, helping designers decide not only which colours to use but also how prominently each one should appear.
In most digital interfaces, the first 70% and the supporting 20% can be created using neutral colours, while the final 10% is reserved for the brand colour that guides attention towards important actions and states.
The percentages should not be treated as exact measurements, because the value of the framework lies in giving every colour a clear role rather than calculating the precise amount of screen space it occupies.
Imagery and graphics can introduce additional colour and personality, but they should still feel connected to the overall palette so that the interface remains cohesive rather than becoming visually fragmented.
Why Choosing Good Colours Is Not Enough
A strong colour palette does not automatically create a strong interface, because the way those colours are distributed throughout the design matters just as much as the individual colours that were selected.
A palette might contain several tones that work beautifully beside one another, yet the final interface can still feel chaotic when every colour is used with the same level of prominence and every component attempts to attract attention at the same time.
This often happens when brand colours are added wherever the design appears too empty, when different sections are given contrasting backgrounds without a structural reason or when several buttons, cards and decorative elements are all treated as equally important.
The result may appear colourful, but it does not necessarily feel considered.
Effective colour usage depends on restraint and hierarchy, because colours become meaningful when users can recognise the role they play within the wider system, whether that role is establishing the background, separating content, supporting readability or directing attention towards an important action.
The 70–20–10 rule provides a useful starting point for creating that structure by separating the palette into three broad layers, each of which performs a different function within the interface.
What Is the 70–20–10 Colour Rule?
The 70–20–10 rule is a proportional framework that suggests building approximately 70% of a design with a dominant colour, around 20% with a supporting colour and the remaining 10% with a more distinctive accent.
Although the framework is also used in areas such as interior design and branding, it can be particularly helpful in digital interface design because websites and digital products usually need to balance large structural areas with readable content and clearly identifiable interactive elements.
In practice, the dominant 70% will often be a neutral background colour, the supporting 20% will provide contrast for text, cards and structural details and the final 10% will consist of the brand colour used to highlight the elements that deserve the most attention.
These proportions are not a technical standard and do not need to be calculated with precision, because the intention is not to measure the number of pixels occupied by each colour.
Instead, the rule encourages designers to think about dominance, support and emphasis as separate visual responsibilities.
When those responsibilities are clear, the interface can remain visually calm while still containing enough contrast, expression and personality to feel complete.
Build the Interface Around a Neutral Base
The dominant 70% of the interface usually consists of a neutral base colour that creates the visual environment in which the rest of the content is presented.
In a light interface, this may be white, off-white or a very light grey, while a darker product may use charcoal, deep grey or another restrained tone as its main background.
The purpose of this base is not simply to fill empty space, because it establishes the overall level of brightness, warmth and visual intensity that will influence every other colour placed on top of it.
A bright white background can feel clean and direct, while a warmer off-white can create a softer and more editorial impression, even when the structure and components remain identical.
The background should therefore reflect the broader personality of the brand without becoming so expressive that it competes with the actual content.
Neutral does not have to mean completely colourless.
A base can contain a subtle warm, cool or branded undertone, provided that it remains restrained enough to function as the foundation rather than the main point of attention.
Designers can also use slightly different versions of the base colour to separate sections, alternate page areas or distinguish grouped content without introducing an entirely new colour into the system.
For example, a page might use an off-white background for its primary sections and a slightly darker neutral for secondary areas, creating structural separation while preserving a consistent visual atmosphere.
These variations should remain close enough to one another that they still feel like part of the same dominant layer.
When every section receives a noticeably different background colour, the page can quickly become fragmented, particularly when the content itself already contains imagery, icons and interactive components.
Use a Supporting Neutral to Create Structure
The supporting 20% introduces the contrast needed to make the interface usable and organised without competing with the final accent colour.
In many interface systems, this layer is not a second expressive brand colour but a contrasting neutral that can be used for text, card backgrounds, dividers, borders, icons and other structural elements.
On a light background, the supporting colour may be a dark grey used for headings and body copy, while softer versions of the same neutral can be used for secondary text or less prominent details.
On a dark interface, the relationship may be reversed, with light neutrals providing the contrast required for readable content and recognisable controls.
The supporting layer can also include surfaces that sit between the background and the foreground, such as lightly tinted cards, form fields or navigation areas that need to be distinguished from the page without feeling like separate visual worlds.
This creates depth and grouping while allowing the dominant background to remain clearly visible.
The distinction between the 70% base and the supporting 20% does not always need to come from hue, because it can also be created through changes in lightness, contrast and opacity.
A card may use the same underlying neutral family as the background but appear slightly darker, while a divider can use a low-opacity version of the primary text colour.
The result is a system in which the structural elements feel related to one another rather than appearing as a collection of individually chosen shades.
Reserve the Brand Colour for Important Moments
The remaining 10% is usually the most recognisable and expressive colour in the interface, which is why it becomes more effective when it is used selectively.
A brand colour that appears in every heading, card, icon, divider and background may initially make the interface feel strongly branded, but it also removes the distinction between elements that are important and elements that are merely decorative.
When everything receives the accent colour, the accent is no longer capable of directing attention.
By reserving the brand colour for primary actions, active states, key navigation elements, small banners and other meaningful points of emphasis, designers can create a clear visual signal that helps users recognise what matters most.
A primary button stands out because it contrasts with the neutral system surrounding it, while an active navigation item becomes easier to identify because the brand colour is not already being used equally across every link.
This does not mean the brand colour can only appear in functional elements, because it may also be used in selected graphics, backgrounds or decorative details where it contributes to the identity of the experience.
The important principle is that these uses should remain intentional.
Every appearance of the accent colour should either support recognition, establish hierarchy or strengthen the character of the brand rather than simply filling a space that feels visually quiet.
Colour Distribution Creates Hierarchy
The 70–20–10 rule is often described as a method for creating a balanced palette, but its deeper value lies in the way it establishes visual hierarchy.
The dominant base provides stability, the supporting neutral makes the content readable and the brand colour creates emphasis.
Together, these layers help users distinguish between the environment of the interface, the information presented within it and the actions that require their attention.
This is particularly valuable in complex products where several cards, filters, buttons and states may appear within the same view.
Without a clear colour hierarchy, a filled card, an active filter and a primary button may all compete visually, even though they perform very different functions.
A structured palette allows the design to communicate these distinctions more efficiently.
Backgrounds and surfaces can remain neutral, supporting controls can use quieter contrast and the strongest accent can be reserved for the current selection or the primary next step.
Colour should therefore be treated as part of the information architecture of the interface rather than as a decorative layer added after the layout has already been completed.
It helps users understand what is interactive, what is currently active, what is informational and what deserves immediate attention.
Adding Graphics and Imagery
An interface built primarily from neutral colours can create clarity and focus, but it may also begin to feel sterile when it contains no imagery, illustration or visual expression.
Graphics can introduce additional colour, depth and personality without requiring the components themselves to become more decorative.
Photography can communicate atmosphere and context, while illustrations can explain abstract ideas or bring a distinctive visual language into the product.
The colours within these graphics do not need to follow the 70–20–10 distribution as strictly as the interface itself, because imagery naturally contains more tonal and chromatic variation.
However, the graphics should still feel connected to the wider palette.
That connection might come from repeating the brand colour within an illustration, selecting photography with a compatible atmosphere or applying a consistent colour treatment across a collection of stock images.
The surrounding interface should also provide enough visual calm for the imagery to work effectively.
When a colourful photograph is placed inside a section that already uses multiple accent colours, gradients, decorative icons and contrasting surfaces, the combined result can become overwhelming.
A neutral foundation gives graphics room to add personality without requiring every part of the design to compete for attention.
The Percentages Are a Guideline, Not a Formula
The 70–20–10 rule should not be treated as an exact mathematical requirement, because the appropriate balance will change according to the type of interface, the brand and the amount of content being presented.
A highly editorial website may contain large areas of photography that make the colour distribution difficult to measure, while a productivity application may require more supporting surfaces because many cards, panels and controls need to be distinguished from one another.
A dark interface may also use a smaller proportion of its base colour within individual components, even though the overall experience still feels dominated by that background.
The percentages are useful because they encourage designers to make one layer dominant, another supportive and another intentionally limited.
The precise numerical relationship is less important than the visual distinction between those roles.
A design may ultimately follow something closer to 65–25–10 or 75–15–10 while still applying the principle successfully.
The framework should therefore be used as a diagnostic tool rather than a rigid restriction.
When an interface feels too flat, the supporting layer may need more distinction.
When it feels visually loud, the accent colour may be occupying too much space.
When the primary action no longer stands out, the brand colour may be appearing too frequently elsewhere.
Thinking in proportions makes it easier to identify where the balance has been lost.
Common Mistakes When Applying the Rule
One common mistake is assuming that the 20% layer must always be a second brand colour.
In many interfaces, introducing another strong colour at this level can cause the supporting layer to compete with the final accent, weakening the hierarchy that the rule is meant to create.
A contrasting neutral is often more effective because it can support text and structure without becoming a second focal point.
Another mistake is using several accent colours within the final 10% without defining how they relate to one another.
A product may require different colours for success messages, warnings and errors, but these functional colours should not be treated in the same way as the primary brand accent.
They belong to a semantic system that communicates specific states and should appear only when the relevant meaning is present.
Designers can also apply the rule too literally by attempting to distribute colour according to exact surface area rather than evaluating how prominent each colour feels.
A small but highly saturated button can attract more attention than a much larger pale background, which means visual dominance cannot be measured through size alone.
The perceived strength of a colour depends on its saturation, contrast, position and the elements surrounding it.
Finally, the accent colour is sometimes used so sparingly that the interface loses its connection to the brand altogether.
Restraint should not mean removing the personality of the design, because the final 10% still needs to appear often enough to establish recognition and guide attention consistently.
Applying the Rule Across a Design System
The 70–20–10 principle becomes most useful when it is translated into reusable decisions rather than applied independently to every page.
The dominant layer can be defined through background and surface tokens, the supporting layer through text, border and secondary surface colours and the accent layer through primary actions, active states and selected branded elements.
This creates consistency across components and reduces the likelihood that a new page or feature will introduce colour in a way that weakens the existing hierarchy.
A button component, for example, can have a primary version that uses the accent colour, a secondary version that relies on the supporting neutral and a tertiary version that uses minimal visual treatment.
Cards can remain within the neutral system unless their content genuinely requires a highlighted state, while navigation elements can introduce the accent only when they are active or selected.
These patterns help users learn what the colours mean.
When the brand colour consistently indicates primary actions or active states, people can recognise those elements more quickly as they move through the interface.
Consistency therefore strengthens both the visual identity and the usability of the product.
The Outcome of a Balanced Colour System
A successful colour system does not attract attention to every colour decision individually.
Instead, it creates an interface in which the structure feels clear, important actions are easy to recognise and the brand remains present without overwhelming the content.
The 70–20–10 rule supports this outcome by giving the dominant background, the supporting contrast and the primary accent separate responsibilities.
It prevents every colour from competing for equal attention and provides a framework through which designers can evaluate whether the interface feels too plain, too colourful or insufficiently structured.
The percentages themselves do not need to be exact.
What matters is that most of the interface creates a stable foundation, the supporting colours make the content readable and the brand colour is used intentionally enough to guide attention.
When each colour has a clear role, the interface feels more cohesive, expressive and complete without requiring additional decoration.
Continue reading
