The 60-30-10 color rule started life as an interior design trick: 60% dominant color, 30% secondary color, 10% accent color. It works just as well on a screen as it does in a living room, but nobody ever tells you the part that actually matters for web design: which element gets which percentage. A longer analysis is available for anyone who wants it.
This guide turns the rule into a working web design system. You will get a role-by-role map of a real page layout (backgrounds, sections, cards, navigation, buttons, links, footers), a method for deciding which of your colors plays which role, and a practical fix for the most common real-world problem: a brand palette with four, five or six colors.
Quick answer: what is the 60-30-10 color rule?
The 60-30-10 color rule is a color proportion formula that splits a design into three unequal parts so the palette feels balanced instead of chaotic:
| Share | Role | Job on a website |
|---|---|---|
| 60% | Dominant | Sets the mood and carries the content. Usually the page background. |
| 30% | Secondary | Creates structure and separation. Section bands, cards, nav, footer. |
| 10% | Accent | Directs attention and drives action. Primary buttons, links, key highlights. |
The percentages are about visible surface area, not about how many hex codes you own. And they are a guideline, not a math exam: 55-35-10 or 65-25-10 will look just as good. What breaks a design is 40-40-20, where two colors fight for the lead and the accent stops being special.
Why an interior design rule works on the web
A room and a web page have the same problem to solve: the eye needs somewhere to rest and somewhere to look. In a room, the walls rest and the throw pillow pops. On a page, the background rests and the call to action pops.
Three practical reasons the rule transfers so well:
- Hierarchy is visual before it is textual. Users scan color blocks before they read headings. A 10% accent tells them where to click without a single word.
- Rarity equals attention. If your brand orange is everywhere, nothing is emphasized. Scarcity is what makes an accent function as a signal.
- It scales to components. The same ratio can be applied to a whole page, to a single section, or to one card, which is exactly how modern component-based design systems are built.
How the percentages translate to pixels
Before you assign roles, decide what you are measuring. On the web, the useful definition is: the colored surface a visitor sees in a typical viewport as they scroll.
What counts toward your percentages:
- Page and section backgrounds
- Card, panel, table and sidebar fills
- Header and footer fills
- Large images and illustrations, because their dominant tones read as color blocks
- Buttons, badges, tags, icons, links, borders, focus rings, charts
What does not count as part of the three-color budget:
- Body text color. Text is functional. Near-black on near-white is a legibility decision, not a palette decision.
- Semantic colors: success green, warning amber, error red. These are system feedback and live outside the ratio.
- Neutral hairline borders and shadows. They are structure, not color.
Step 1: Assign the three roles to real page elements
The 60%: your dominant color
On most websites the dominant color is a neutral or very light tint: white, off-white, warm sand, cool grey, or in dark themes a deep charcoal or navy. It is the canvas the content sits on.
Give the 60% to:
- The main page background
- The inside of most content sections
- Full-width text blocks, blog article bodies, form backgrounds
- Product photography backgrounds so images blend with the page
Common mistake: making your saturated brand color the 60%. A page that is 60% electric blue creates eye strain, kills text contrast options and leaves your accent nowhere to go. Save the vivid stuff for smaller surfaces.
The 30%: your secondary color
The secondary color is the structural color. Its job is to break a long scroll into digestible chunks and to signal “this is a different kind of content”.
Give the 30% to:
- Alternating section bands (the classic “tinted band between two white sections”)
- Cards, pricing tables, testimonial panels, feature tiles
- The navigation bar or a sticky header when it is filled
- The footer, which is often the largest single block of secondary color on the site
- Sidebars, filter panels, dashboard rails
- Hover states and selected states of large surfaces
A darker or deeper version of your brand color usually works beautifully here, because it says “brand” loudly without shouting.
The 10%: your accent color
This is the color your visitors are trained to click. Protect it.
Give the 10% to:
- Primary buttons only (one primary CTA per screen where possible)
- Text links inside body copy
- Active navigation item, active tab, active step in a progress bar
- Icons that indicate interaction, form focus rings, checked checkboxes and toggles
- Badges such as “Most popular” or “New”
- Key data in charts, underlines or highlights on hero headline keywords
Element-to-role cheat sheet
| Element | Role | Notes |
|---|---|---|
| Page background | 60% | Lightest or darkest neutral in the palette |
| Alternating section band | 30% | Use one tint, not three different ones |
| Cards and panels | 30% | Or 60% with a 30% border for a lighter feel |
| Header / nav bar | 60% or 30% | Transparent over hero counts as 60% |
| Footer | 30% | Deepest shade of the secondary works well |
| Primary button | 10% | Never use the accent for decoration too |
| Secondary button | 30% | Outline or ghost style, lower visual weight |
| Body links | 10% | Same accent as buttons for consistency |
| Body text | Outside the ratio | Contrast first, hue second |
| Success / error states | Outside the ratio | Universal meanings, keep them conventional |
Step 2: Decide which of your colors plays which role
Most teams already have colors. The skill is casting them correctly. Run your palette through these four tests, in order.
- Lightness test. The lightest color (or darkest, in a dark theme) becomes the 60%. Backgrounds need to sit far away from text in lightness so type stays readable.
- Saturation test. The most saturated, most “loud” color becomes the 10%. High chroma over a small area reads as energy. Over a large area it reads as noise.
- Recognition test. The color people associate with your brand becomes the 30% if it is mid-tone, or the 10% if it is vivid. Your brand color does not need to cover the page to be recognized; a logo, a footer and a row of buttons is plenty.
- Contrast test. Whatever you pick for 10% must reach at least 4.5:1 contrast against the 60% background when used as link text, and its label text must reach 4.5:1 against the button fill. If it fails, darken or lighten it and keep the hue.
Worked example: a three-color brand
Brand palette: deep teal #0F4C4A, sand #F5F0E8, coral #FF5A47.
- 60% Sand #F5F0E8 as the page background. Warm, calm, easy on the eyes, plenty of contrast with dark text.
- 30% Deep teal #0F4C4A for the footer, alternating band, filled cards and the outline of secondary buttons.
- 10% Coral #FF5A47 for the primary CTA, links, active tabs, the “Most popular” badge and one highlighted word in the hero headline.
Flip those roles and you get a page that is 60% coral: instant fatigue, and a CTA nobody can find.
Section-by-section walkthrough of a landing page
| Section | Background | Accent usage |
|---|---|---|
| Hero | 60% dominant | One accent button, one accent underline on a keyword |
| Logos / social proof | 60% dominant | None. Let it breathe. |
| Features grid | 30% tinted band, 60% cards | Accent icons only, no accent fills |
| How it works | 60% dominant | Accent step numbers |
| Testimonials | 30% secondary, full bleed | Accent quote mark or active carousel dot |
| Pricing | 60% dominant | Accent border plus badge on the recommended plan, accent CTA on that plan only |
| FAQ | 60% dominant | Accent chevron on the open item |
| Final CTA band | 30% secondary (deepest shade) | Accent button, high contrast |
| Footer | 30% secondary | Accent on hover only |
Notice the rhythm: dominant, dominant, secondary, dominant, secondary. The secondary color never appears twice in a row, and the accent appears in short bursts, roughly once per section. sofaluz.com makes the same point with more data.
Step 3: Lock it into code
Name your variables by role, not by hue. “Blue-500” ties your CSS to a color you may rebrand next quarter. “Surface” and “accent” survive a redesign.
:root {
/* 60% */
--surface: #F5F0E8;
--surface-elevated: #FFFFFF;
/* 30% */
--structure: #0F4C4A;
--structure-soft: #E3EDEB;
/* 10% */
--accent: #FF5A47;
--accent-hover: #E64632;
/* outside the ratio */
--text: #14201F;
--text-muted: #5A6664;
--border: rgba(15,76,74,.12);
}One rule to enforce in code review: the accent variable may only appear on interactive elements. If it shows up on a decorative divider, the whole system loses its meaning.
What to do when your brand has more than three colors
This is the question nobody answers, and it is where most palettes fall apart. Four to six brand colors do not break the 60-30-10 rule. They just need a hierarchy inside it. The same thing is done cleanly on kyanite-studios.org.
Option 1: Split the 10% (the 60-30-7-3 approach)
Keep one dominant, one secondary, then divide the accent budget. The main accent gets 7%, the secondary accent gets 3%.
- 7% primary CTAs and links
- 3% badges, charts, illustrations, one-off highlights
This is how most product design systems handle a fifth color without visual chaos.
Option 2: Build tint families instead of adding hues
Turn each of your three roles into a family of 3 to 5 steps: 90% tint, 50% tint, base, dark, darker. You gain enormous flexibility for hover states, borders and layered cards while your page still reads as three colors.
Option 3: Rotate by page, not by section
Common in agency, education and marketplace sites. The 60% and 10% stay fixed sitewide; the 30% secondary changes per category or per product line. Users still learn one accent color for actions, and each section gets its own identity.
Option 4: Push extra colors into imagery and illustration
Colors four, five and six live in photography, illustrations and infographics rather than in the interface chrome. They stay on-brand and remain visible without competing with your buttons.
Which option fits you?
| Situation | Best approach |
|---|---|
| 4 brand colors, one clearly vivid | 60-30-7-3 split accent |
| Complex app or dashboard | Tint families per role |
| Multi-category site or multiple product lines | Rotate the 30% per section |
| Playful brand with 6+ colors | Push extras into illustration only |
| Two colors only | Use 60% neutral, 30% brand, 10% darker or brighter shade of the brand |
Dark mode: the ratio holds, the values invert
Dark mode is not “the same palette with a black background”. Re-cast the roles:
- 60% becomes a deep neutral, ideally slightly tinted toward your brand hue rather than pure #000000.
- 30% becomes an elevated surface, one or two steps lighter than the background, used for cards and the nav.
- 10% accent usually needs lifting: on dark backgrounds, saturated colors vibrate. Reduce chroma slightly and increase lightness until contrast passes.
Five quick ways to check your ratio
- The squint test. Blur your eyes at a full-page screenshot. You should see one big field, a few structural blocks and a handful of bright dots.
- Grayscale test. Desaturate the screenshot. Hierarchy should survive. If everything turns into the same grey, you were relying on hue instead of contrast.
- Zoom out to 25%. Scroll the entire page. Count how often the accent appears. More than once or twice per screen and it is no longer an accent.
- Screenshot sampler. Drop a full-page capture into any image editor and check the histogram or use a color-count tool. It will not be exactly 60-30-10, but you will spot a 45-45-10 problem immediately.
- Contrast audit. Run every accent-on-dominant and text-on-secondary pair through a contrast checker. Target 4.5:1 for text and 3:1 for large text, icons and UI boundaries.
Mistakes that ruin an otherwise good palette
- Two competing 30% colors. If two mid-tone colors cover similar surface area, the eye cannot decide what matters.
- Accent inflation. Accent on the button, plus the icons, plus the dividers, plus the headings. Now nothing pops.
- Gradients that eat the budget. A full-width brand gradient hero can silently become your 60%.
- Ignoring imagery. A page of warm orange photography is not neutral, even if the background is white.
- Forgetting hover, focus and disabled states. Every accent needs at least three variants, or interactions feel broken.
- Chasing trends over legibility. Low-contrast grey-on-grey looks refined in a mockup and fails on a phone in sunlight.
60-30-10 vs other color ratios
| Ratio | Origin | Best used for |
|---|---|---|
| 60-30-10 | Interior design | Websites, UI, branding, presentations |
| 70-20-10 | Interior design variant | Minimal, editorial layouts with lots of white space |
| 60-30-7-3 | Design systems practice | Brands with 4 or more colors, dashboards |
| 50-30-20 | Bold marketing design | Campaign pages, expressive brands, short landing pages |
Your 10-minute action plan
- List every color your brand owns, with hex values.
- Sort them by lightness and by saturation.
- Cast the roles: lightest becomes 60%, mid-tone brand color becomes 30%, most saturated becomes 10%.
- Handle extra colors with the 7-3 split or push them into imagery.
- Define CSS variables by role, not by hue.
- Rebuild one page: dominant background, alternating secondary bands, accent on interactive elements only.
- Run the squint, grayscale and contrast tests, then adjust.
Do this once and you stop guessing at colors forever. Every new page, component or campaign inherits a decision that has already been made.
FAQ about the 60-30-10 color rule
What is the 60-30-10 rule in color theory?
It is a proportion guideline stating that a balanced color scheme uses roughly 60% of a dominant color, 30% of a secondary color and 10% of an accent color. The dominant color sets the mood, the secondary adds structure and contrast, and the accent draws attention to the most important element.
Is 60-30-10 the golden ratio?
No. The golden ratio is approximately 1:1.618 and appears in proportion and layout, not in color distribution. 60-30-10 is a practical rule of thumb built on the idea of unequal, hierarchical proportions. The two are often confused because both aim for pleasing imbalance, but they are unrelated mathematically.
What is the 70-20-10 rule in interior design?
It is a slightly more conservative version of the same idea: 70% dominant, 20% secondary, 10% accent. It produces a calmer, more minimal result. On the web it suits editorial sites, luxury brands and layouts built around generous white space.
What is the 70-20-10 rule for artists?
Painters and illustrators use it as a value and color-temperature guide: about 70% of the canvas in one value or temperature family, 20% in a supporting range and 10% in the strongest contrast or brightest chroma, usually placed at the focal point. It is the same scarcity principle behind a well-placed CTA button.
Does the 60-30-10 rule include black, white and text colors?
Not usually. Neutrals used for body text, borders and shadows are treated as functional rather than as palette colors. However, if a large area of pure white or black defines your page, it becomes the dominant 60% color in practice.
Can I use the 60-30-10 rule with only two colors?
Yes. Use a neutral for 60%, your brand color for 30%, and a darker or brighter shade of that same brand color for the 10% accent. A monochromatic palette can still create clear hierarchy through lightness and saturation.
Should my brand color be the 60% or the 10%?
If it is vivid and highly saturated, make it the 10% accent and let a neutral carry the 60%. If it is a mid-tone or muted color, it works well as the 30% structural color. Brand recognition comes from consistent placement, not from surface area.
How strict do the percentages need to be?
Not strict at all. Think of it as 60-ish, 30-ish and 10-ish. The rule fails only when two colors compete for dominance or when the accent stops being rare. If your accent covers more than about 15% of the page, tighten it.
Does the rule apply to ecommerce product pages?
Yes, and it is arguably more important there. Keep product photography on a 60% neutral surface, use the 30% for filters, cards and the footer, and reserve the 10% accent almost exclusively for “Add to cart”, price highlights and stock badges.