What the ratio means
The 60/30/10 rule divides a composition into a dominant color, a supporting color and a small accent. It is a visual planning device, not a requirement to count pixels. The value lies in hierarchy: one color establishes the environment, another adds structure and the final color directs attention.
In a website, the dominant role may be a light background rather than a saturated brand color. The secondary color can appear in sections, cards and illustrations. The accent belongs on selected buttons, active states and small moments that need emphasis.
Begin with roles, not swatches
Write down what each color must do before adjusting hues. Ask which color can cover a large area without tiring the eye, which one carries identity and which one remains noticeable in small quantities. A palette becomes more useful when every color has a repeatable job.
How to build the palette
- Choose a calm dominant color that can support text and content.
- Add a secondary color with enough difference to create sections or rhythm.
- Select one accent that remains distinctive at button and icon size.
- Add functional neutrals for text, borders and disabled states.
- Test contrast before refining the mood.
Adapt the ratio to the medium
A poster may use a saturated dominant field, while a dashboard needs quieter surfaces around dense information. A brand system may distribute the ratio across a campaign rather than inside every individual page. The goal is recognisable balance, not identical percentages in every asset.
When to break the rule
Break it when content or interaction demands a different hierarchy. A data visualisation may need several categorical colors. A black-and-white editorial layout may use only a tiny highlight. Deviations work when the visual priority remains clear.
Common mistakes
Using three equally loud colors removes the hierarchy the rule was meant to create. Applying the accent to every button, heading and icon turns it into another dominant. And selecting colors without checking text contrast can produce a balanced screenshot that is difficult to use.
The tool creates a planning preview. Final decisions should be tested on the actual pages, devices, materials and content where the palette will live.