The 60-30-10 Rule: Balancing Color in Design

The first time the 60-30-10 rule actually clicked for me, I was staring at a dashboard I'd built that looked busy in a way I couldn't explain. The palette was fine. The colors were harmonious, pulled straight off the wheel. But the screen felt loud, like everyone in the room was talking at once. The problem wasn't which colors I'd chosen. It was how much of each I'd used.

That distinction is the whole point of the 60-30-10 rule. It says almost nothing about hue and almost everything about proportion: roughly 60% of your design is a dominant color, 30% is a secondary supporting color, and 10% is an accent. Get those ratios right and even a mediocre palette reads as intentional. Get them wrong and the most carefully tuned harmony still feels chaotic.

Where the rule comes from

The 60-30-10 rule was borrowed from interior design, where decorators have used it for decades to balance a room. The classic breakdown: 60% goes to the walls, about 30% to upholstery and larger furniture, and the final 10% to accessories — a throw pillow, a vase, the art on the wall. Walk into a well-designed room and you usually can't articulate why it feels calm, but the proportions are doing quiet work in the background.

Fashion stylists use the same logic (suit, shirt, pocket square), and somewhere along the way it migrated into graphic and web design. The medium changed; the principle didn't. You give each color a defined role and a defined amount of space, and balance follows almost automatically.

How it maps to UI and web design

Here's the translation I actually use when I sit down to build an interface.

• 60% — the dominant color. This is your canvas: page backgrounds, large surfaces, the empty space your content sits on. It sets the overall mood and, crucially, it's usually the color people don't notice. In most good interfaces the dominant is a neutral — a white, off-white, light grey, or in dark mode a near-black like #0F1115. Neutrals are dominant because they're generous; they let the other colors carry the personality without fighting them.
• 30% — the secondary color. This is the supporting cast: cards, sidebars, navigation bars, section dividers, secondary surfaces. It provides structure and a second layer of contrast against the dominant, but it never demands attention. Think of it as the furniture in the room.
• 10% — the accent color. This is where the action lives: primary buttons, links, active states, badges, the one chart series you want people to track. It's the throw pillow. The entire reason it works is scarcity.

That last point is the one most people miss, so let me say it plainly. The accent isn't powerful because of the color. It's powerful because there's so little of it. When your blue appears only on the primary button and the active nav item, a user's eye learns in about two seconds that blue means act here. The moment blue also shows up on headings, icons, three card borders, and a background gradient, it stops meaning anything. You've spent the signal.

A worked example

Let me build a real one so the proportions aren't abstract. Say I'm designing a SaaS dashboard and I open the color palette generator, pick a calm blue as my base, and use the monochromatic and complementary harmonies to pull supporting tones.

• Dominant (60%): #F7F8FA, an almost-white cool grey. It's the page background and the empty space inside cards. You barely register it, which is exactly right.
• Secondary (30%): #1E293B, a deep slate. It carries the top nav, the sidebar, headings, and body text. Notice that "secondary" doesn't have to be a vivid color — here it's a dark neutral doing heavy structural work. Together with the dominant it's already a complete, usable interface.
• Accent (10%): #2563EB, a confident blue, reserved for the primary CTA, links, and the active menu state. Nothing else gets it.

Run that blue through a contrast checker against the white background and you're comfortably past the WCAG AA threshold of 4.5:1 for normal text — worth confirming, because an accent that fails contrast is an accent that fails its one job. (More on that in WCAG Contrast Ratios Explained.) The built-in checker in the tool will flag this for you before it ships.

What strikes most people about this palette is how little color it actually contains. Two neutrals and one blue. That's the 60-30-10 rule working as intended — restraint reads as polish.

Why proportion beats hue selection

I'll make a slightly contrarian claim: for an interface, getting the proportions right matters more than getting the exact hues right. You can swap my #2563EB accent for a teal, a violet, or a warm coral and the design will still feel composed, because the structure holds. But take a beautifully chosen, perfectly harmonious three-color palette and apply it in equal thirds, and it'll look like a parking sign.

This is liberating once you internalize it. It means a beginner doesn't need a perfect eye for color — they need discipline about how much of each color to deploy. Pick any sound harmony (analogous and split-complementary are both forgiving starting points; see Understanding Color Harmony in UI Design for how to choose), then assign roles and ration the accent ruthlessly.

The Nielsen Norman Group makes a related point in their work on using color to enhance design: color carries meaning best when it's used sparingly and consistently. The 60-30-10 split is essentially a practical recipe for that sparingness.

The mistakes I see most often

No clear dominant. This is the dashboard problem I opened with. Three colors near equal weight, none of them clearly the canvas, and the eye has nowhere to rest. Fix: pick one color (usually a neutral) and commit it to roughly 60% of the surface before you place anything else.

Accent overuse. The most common failure by a wide margin. The accent creeps onto headings, then icons, then a few borders, and within an afternoon the design has no focal point. A useful gut check: if you can quickly point to more than a handful of distinct places your accent appears on a given screen, you've probably overspent it. Pull it back to true interactive moments.

Treating the numbers as gospel. They're a ratio, not a measurement. Nobody is counting pixels. 60-30-10 is shorthand for "one dominant, one supporting, one rare." If your split lands closer to 70-20-10, fine. The hierarchy is what matters, not the decimal.

Forgetting the rule scales recursively. Inside a single card you can run the same proportions again — mostly surface, some structural detail, a touch of accent. And the rule travels into dark mode cleanly: your 60% just becomes a dark neutral instead of a light one, with accents that often need a slight desaturation to avoid glowing. If you're going there, Best Practices for Dark Mode Color Palettes digs into the adjustments.

Turning it into a repeatable method

Here's the workflow I'd hand a junior designer.

• Choose a harmony first. Open the color wheel, pick a base hue, and generate a related set — analogous for calm, complementary for punch. Don't overthink the exact hexes yet.
• Assign the dominant. Decide your 60%. Nine times out of ten it's a neutral. Light for default, dark for dark mode.
• Assign the secondary. Pick the 30% that gives structure — often a second neutral or a muted version of your brand color. Confirm dominant and secondary alone make a working layout.
• Ration the accent. Pull one vivid color for the 10%. Check its contrast against the surfaces it'll touch. Then guard it — every time you're tempted to reuse it, ask whether that element is genuinely interactive.
• Audit by squinting. Step back, blur your eyes, and look at the screen. You should see a calm field with one or two bright points pulling your gaze. If the whole thing shimmers, your accent has leaked.

The reason this rule has survived a jump from living rooms to dashboards is that it solves a problem people feel before they can name it. Color in a design isn't really about taste — it's about budget. The 60-30-10 rule is just a sensible way to spend it. If you want to pressure-test a set of hues before committing, drop them into the color palette generator, check the contrast, and then ask the harder question the tool can't answer for you: not are these the right colors, but how much of each am I about to use.