The 60-30-10 Rule in Web Design: Adapting the Color Rule

The 60-30-10 colour rule describes a composition with a dominant colour, a supporting colour, and a smaller accent. It is a useful sketching device, not a scientific law or a requirement for every viewport. For websites, its real value is encouraging unequal emphasis rather than dividing a screen into three mathematically perfect blocks.

Translate the ratio into colour roles

Start by identifying the three roles: the field that holds most content, the colour that organizes supporting regions, and the accent that draws attention. Use the colour converter to record exact values for each candidate. A named colour such as “warm white” is not precise enough for a repeatable experiment.

Dominant does not mean vivid. On many content-heavy websites, the dominant colour is a neutral background. The supporting colour might be a dark text family or a tinted section, while the accent appears only in selected details. This can satisfy the spirit of the rule without making 60% of the page bright blue.

Write the roles in plain language before choosing percentages. For example: warm paper for reading, charcoal for structure, and coral for emphasis. If the intended job of a colour is unclear, changing its share from 12% to 10% will not fix the underlying problem.

Browse the Colour category for other palette relationships, but keep this exercise focused on distribution. The 60-30-10 rule concerns relative emphasis; it does not specify which hues should be chosen or whether they are suitable together.

Measure visual weight rather than component counts

A full-width tinted region can outweigh dozens of tiny accent marks. Conversely, a small highly saturated patch can draw more attention than a much larger quiet surface. Coverage and intensity work together, so simply counting coloured components produces a misleading picture.

Take a screenshot of a representative page and blur or shrink it. Look for the largest fields and the strongest focal point. This is not a formal usability test, but it helps reveal whether the intended accent is actually dominant or whether a decorative illustration has taken over.

Treat photography as part of the colour composition. A hero image filled with green vegetation can become the largest colour field even when the stylesheet contains no green tokens. If the image changes seasonally or editorially, expect the apparent ratio to change as well.

Use rough estimates at this stage. The point is to notice an accent consuming half the screen, not to compute a pixel-perfect histogram. A page can work well at 75-20-5 or 85-10-5 if the hierarchy is clear and the content needs that distribution.

Build a restrained working palette

Choose a neutral field, a supporting family, and one expressive accent. Give each a light and dark option only when there is a specific use. Otherwise, a simple ratio exercise can accidentally become a twenty-swatch palette with no clear priorities.

:root {
--field: #faf7f2;
--structure: #253742;
--accent: #b9422d;
--accent-soft: #f9e9e4;
}

.colour-study {
color: var(--structure);
background: var(--field);
}

.colour-study__emphasis {
color: var(--accent);
background: var(--accent-soft);
}

The code does not enforce a ratio. CSS values define colours, while layout, content, imagery, and repetition determine coverage. Avoid building a component rule that mechanically fills 10% of its area with the accent just to honour a composition guideline.

The MDN colour documentation explains valid formats for the values. Keep the palette small while testing distribution so you can identify whether an improvement came from a better hue relationship or simply a more disciplined use of colour.

Adapt the rule to different page types

A reading page may need an overwhelmingly neutral field with very little accent. A portfolio cover can tolerate a broad saturated area because it has less dense information. A data-heavy screen may need several categorical colours, making a literal three-colour interpretation inappropriate.

Preserve an attention budget rather than a fixed formula. Decide what should be noticed immediately and what should remain quiet. If every heading, border, illustration, and callout uses the accent, the nominal 10% colour may no longer function as an accent at all.

On smaller screens, a supporting region may stack above the main content and temporarily fill most of the viewport. Check the composition at realistic scroll positions instead of only reviewing a full-page desktop mockup. The ratio is experienced over time as well as across area.

Use the contrast checker for actual foreground pairs. A colour chosen to be a small accent still needs suitable treatment when used as text. Distribution cannot compensate for a weak contrast relationship, and a visually dominant colour is not automatically a readable foreground.

Review exceptions without losing discipline

Status messages, charts, partner logos, and editorial photographs may introduce additional colours. Document these exceptions rather than pretending they do not count. The goal is a controlled composition, not a palette that breaks as soon as real content arrives.

The W3C guidance on use of colour is relevant when an accent indicates meaning. If coral marks required fields or selected filters, pair it with an explicit cue. Colour distribution and information clarity are separate design responsibilities.

For historical and conceptual context, MDN's colour theory overview provides a useful reference. Avoid presenting a familiar design heuristic as a proven universal optimum. Explain what the rule helped you notice and why your final distribution may depart from it.

Finish with a simple review note: dominant field, supporting role, accent role, and allowed exceptions. Save two realistic page examples. Documented intent is more useful to future contributors than an instruction to keep an exact ratio that nobody can consistently measure across dynamic content.

Key takeaways

• Use 60-30-10 as a sketch, not a compliance target.
• Assign colour roles before estimating their coverage.
• Include imagery and saturation when judging visual weight.
• Adapt the distribution to content density and screen size.
• Keep the accent selective, and evaluate readability independently of the ratio.