The 60-30-10 rule says your dominant color covers 60% of your layout, your secondary color covers 30%, and your accent covers 10%.
That's the whole rule. The rest is understanding why it works and where each color goes.
Not sure which colors to use? Generate a 60-30-10 palette →
What the numbers mean
Each number maps to a role. Colors in a 60-30-10 layout aren't interchangeable — each one has a specific job.
| Role | Proportion | Where it appears | |------|-----------|------------------| | Dominant | 60% | Page background, card surfaces, content areas | | Secondary | 30% | Sidebar, navigation, headers, section dividers | | Accent | 10% | Buttons, links, notifications, active states |
Dominant (60%) is your backdrop. It's the color that covers the most surface area on screen — usually the page background and the surfaces behind your content. Most of the time, this is a light, neutral color that lets text and components sit on top without visual noise.
Secondary (30%) provides structure. It's the color that frames your content — the navigation bar at the top, the sidebar on the left, the footer at the bottom. It separates sections and creates visual grouping without drawing clicks. Think of it as the skeleton your content hangs on.
Accent (10%) is your signal color. It appears only on interactive elements: the primary button on your sign-up form, the active item in your navigation, the badge that says "3 new messages." Because it appears rarely, users immediately recognize it as "this is where I act."
Why 60-30-10 works
The rule is built around one idea: scarcity creates signal.
When your accent color appears on buttons, headings, icons, borders, and decorative elements, it stops meaning anything. Your eye has nowhere to land. Everything competes for attention, so nothing wins.
When your accent color appears only at action points — the one button, the one badge, the one active state — your eye goes straight to it without being told. That's not a styling choice. It's how attention works.
The same logic applies to your secondary color. If your navigation and your content area look similar, there's no visual separation between "structure" and "content." Pushing your secondary color darker or more saturated makes the layout feel organized at a glance, before the user reads anything.
The 60-30-10 split isn't a formula invented by designers. It's a formalization of what already happens in layouts that feel clear and intentional. The rule gives you a language for the decisions you'd otherwise make by feel.
A concrete example
Here's how the rule maps to a light SaaS app. Three colors, three roles:
| Role | Hex | What it covers |
|------|-----|----------------|
| Dominant (60%) | #f8fafc | Page background, card surfaces, form fields |
| Secondary (30%) | #1e293b | Sidebar, top nav, table headers |
| Accent (10%) | #3b82f6 | Buttons, links, active nav state |
In CSS, this maps directly to three custom properties:
:root {
--color-dominant: #f8fafc; /* page background — 60% */
--color-secondary: #1e293b; /* sidebar and nav — 30% */
--color-accent: #3b82f6; /* buttons and links — 10% */
}
You don't need to know CSS to read that. The comments tell the story: one color for the background, one for the structure, one for the actions. When you want to change the accent from blue to green, you change one value and every button and link updates automatically.
For a complete setup guide with Tailwind v4 syntax and real component examples, see the developer deep-dive guide.
To skip the choosing step entirely and get a palette with the hex values pre-filled, the CSS block and Tailwind config are generated at sixtythirtyten.co →. Enter any starting color and it produces all three roles.
Common mistakes
Using the accent color on more than one type of element. If your accent blue appears on buttons AND section headings AND card borders, it loses its meaning. Protect the accent. Reserve it for interactive, action-oriented elements only.
Choosing secondary and dominant colors that are too similar. If your page background is #f8fafc and your navigation is #f1f5f9, there's almost no visible separation between content and structure. Users have to work harder to orient themselves. Push the secondary color further — darker or more saturated — so the layout boundary is obvious.
Picking three colors before deciding which is the accent. The accent is your scarcest color. Choose it last, after you know what your dominant and secondary will be. The accent should contrast sharply against both.
Applying the rule to decorative elements. Illustration backgrounds, marketing banners, and decorative icons live outside the 60-30-10 system. The rule governs your UI chrome — backgrounds, navigation, interactive controls. Don't count decorative color toward any of the three buckets.
Ready-to-use palettes
If you want to skip the color-choosing step and start from proven combinations, 60-30-10 hex color palette examples has five ready-to-use palettes — each with the full CSS variables block and Tailwind config already written.
For a CSS variables reference you can paste into any project, see the CSS variables color system cheat sheet.
Generate your palette at sixtythirtyten.co →
Enter one color and get a 60-30-10 palette with the CSS variables and Tailwind config already written. Drop it into your project and start building.