The 60-30-10 Rule for Colour That Just Works

Interior designers have a cheat code they rarely explain to the rest of us. Sixty percent of the room is one calm colour, thirty percent is a supporting one, and ten percent is the thing your eye actually lands on. It works on walls. It works even better on screens.

The ratio is called 60-30-10, and it solves a problem most palettes never survive: too many colours all shouting at once. Give each one a job. Give each one a size. Suddenly the whole thing breathes, and your eye knows where to go without being told.

What the three numbers actually mean

The 60 is your background. Page canvas, card fills, the wide quiet areas nobody consciously notices. It's usually a near-neutral — an off-white, a soft grey, a very dark charcoal for dark mode. Think #f8f9fa, not fire-engine red.

The 30 is your secondary. Surfaces that sit on top of the background: nav bars, sidebars, section blocks, the borders that separate one region from another. It has more presence than the 60, but it's still a team player. Often it's just a deeper or cooler shade of the same family.

Then the 10. This is the loud one. Your primary button, the active link, the badge that means look here. It's the only colour allowed to be saturated and bright, and because it shows up so rarely, it hits hard. A single #4dabf7 across a mostly-grey screen does more work than ten competing brights ever could.

Why the imbalance is the whole point

Equal amounts of three strong colours read as chaos. Your brain can't find the priority, so it treats everything as equally urgent — which means nothing feels urgent at all. Hierarchy needs contrast in quantity, not just in hue.

Scarcity is what gives the accent its power. Spend it everywhere and it stops meaning anything. Ever seen a dashboard where every metric is in a bright box, every button is filled, every label is coloured? Exhausting. Nothing leads. The 60-30-10 split builds the calm that makes one confident stroke of colour actually register.

A concrete example

Picture a simple SaaS settings page. The background is a warm off-white at roughly 60% of the visible area. Cards and the left sidebar sit in a light slate — that's your 30, giving structure without noise. Every "Save" button, every toggle in its on state, every unread dot glows in one teal accent. That teal is maybe 8% of the pixels on screen.

Now a user lands there. Where do their eyes go? Straight to the teal. You didn't add an arrow. You didn't write "click here". You just rationed the colour, and the interface did the pointing for you.

Want to feel this instead of reading about it? Open the Palette Generator, grab ten palettes, and drop one onto real components in the UI Preview. Assign the biggest swatch to your background and the brightest to a single button. The difference is immediate.

Assigning the roles without guessing

Pick your accent first — it's the colour you care about, the one with a reason to exist. Everything else supports it. From that anchor, pull a low-saturation neutral for the 60 and a mid-tone for the 30. They don't need to be exciting. They need to get out of the way.

In the Palette editor you can nudge each one until the split feels right, then export the set as CSS variables so the ratio lives in your code, not just your head. Name them by job while you're at it. A background token called --surface and an accent called --action tell the next developer exactly how much of each to use. The Design Tokens tool exists for precisely this — colour named by role, so the 60-30-10 discipline survives contact with a real codebase.

When to break it

The rule is a starting point, not a law. Some interfaces earn their keep by ignoring it. A bold marketing landing page might run 50-30-20 to feel energetic. A data-heavy analytics view might need several accents because it's genuinely encoding several things — status, category, severity — and each one carries meaning.

Break it on purpose, though, never by accident. If you're using five accents because you couldn't decide, that's not a creative choice. That's a palette avoiding a decision. Learn the ratio, ship a few screens with it, and you'll feel exactly when a design wants more than one loud voice.

Common questions

Does the 60-30-10 have to be exact?

No. It's a proportion, not a measurement. Nobody's counting pixels. Aim for one dominant neutral, one clear support, and a small pop — if the accent covers roughly 5–15% you're in the right zone.

Can the 10% be more than one colour?

It can, but keep the total small. A success green and an error red can coexist as accents because they mean different, non-overlapping things. Two accents that mean the same thing is just indecision wearing a nice coat.

What if my brand colour is a neutral?

Then it becomes your 60 or 30, and you borrow an accent from a neighbouring hue. A brand built on charcoal still needs one bright somewhere to guide the eye. Grey can lead the room; it can't also be the spark.

Learn the split once and you'll never quite unsee it — in apps, in packaging, in every room you walk into. Ready to try it on something real? Open the UI Preview and watch a single well-placed accent do the talking.