The 60-30-10 Color Rule: How to Use It in Any Design

The 60-30-10 rule is a design proportion guideline: 60% of any design uses a dominant color, 30% uses a secondary color, and 10% uses an accent. The ratio creates visual balance — enough variety to be interesting, enough consistency to be cohesive. Applied to a three-color palette, it tells you not just which colors to use but how much of each.

The rule originated in interior design but is now standard guidance in graphic design, web UI, fashion, and any field that involves color composition. This guide explains how to select the right three colors and apply the proportions correctly.

What Each Percentage Means in the 60-30-10 Rule

The three roles are not interchangeable — each has a specific function:

• 60% — Dominant: The color that takes up the most visual space. In a room, this is the walls. In a website, this is the background and main surfaces. In print, this is the primary field. It is usually the most neutral, most subdued version of your palette — the "canvas" that everything else sits on. It does not need to be white or gray; it can be a rich color as long as it does not compete with the content above it.
• 30% — Secondary: The color that creates depth, structure, and contrast without overwhelming. In a room, this is large furniture. In a website, this is cards, sidebars, and section dividers. It should harmonize with the dominant but be clearly distinguishable. Often a deeper or lighter version of the dominant, or an adjacent hue.
• 10% — Accent: The color that draws the eye and directs attention. In any design context, this is the color on buttons, highlights, price tags, pull quotes, notification badges, and the most important single element on any given screen or page. It should create enough contrast to stand out immediately. This is where a complementary or split-complementary color lives — not spread across the entire design, just the 10% that matters most.

How to Choose Colors for Each Role

The harmony type determines how the three colors relate. The 60-30-10 proportions determine how much of each you use. Here is how to combine them:

Harmony Type	60% (Dominant)	30% (Secondary)	10% (Accent)
Complementary	Primary color (muted)	Neutral or tint of primary	Complementary opposite (vivid)
Split-complementary	Primary color (muted)	One flanking color (mid-saturation)	Other flanking color (vivid)
Analogous	Leftmost hue (cooler/calmer)	Middle hue	Rightmost hue (warmer/vibrant)
Monochromatic	Lightest tint	Mid-range value	Darkest shade or most saturated

For most projects: generate a split-complementary palette from your brand color. The base becomes your 60%, one split becomes your 30%, and the other split (typically the warmer, more vivid color) becomes your 10% accent.

Sell Custom Apparel — We Handle Printing & Free Shipping

Applying 60-30-10 to Website Design

In web design, the proportions map to specific elements:

• 60% (dominant) → Page background, large section backgrounds, footer, navigation background. Example: off-white (#FAFAFA), soft warm gray, or a very light tint of your brand hue.
• 30% (secondary) → Card backgrounds, sidebar, modal overlays, line dividers, secondary text. Example: a medium-saturation tint 1–2 shades deeper than the dominant.
• 10% (accent) → All CTA buttons, primary links, active nav states, notification dots, important badges, icons that indicate action. One vivid color — use it consistently for anything that says "do this."

The most common mistake in web color: making the accent too common (buttons, backgrounds, headings, borders all in the accent color) until it loses its ability to direct attention. If the accent color appears everywhere, users stop noticing it — and so does the call to action.

Applying 60-30-10 to Interior Design

The 60-30-10 rule originated in interior design and remains the standard guidance for room color:

• 60% (dominant) → Wall color. Usually the largest single color in a room. Can be a neutral (white, linen, greige) or a muted version of your main hue.
• 30% (secondary) → Large furniture (sofa, chairs, rugs, curtains). The secondary anchors the room and reinforces the color story without competing with walls.
• 10% (accent) → Throw pillows, artwork, vases, lamp shades, a single accent wall, small decorative objects. This is where a bold, vivid color belongs — in small doses, it energizes a room that would otherwise feel flat.

Generate your room palette using the Color Palette Generator: enter your planned wall color as the base, select a harmony type, then assign the resulting colors to the three roles. The 30% and 10% assignments are interchangeable depending on which generated color is more vivid — always put the most vivid color in the 10% role.

Frequently Asked Questions

Does the 60-30-10 rule apply to black and white designs?

Yes — in monochromatic or grayscale designs, the 60-30-10 applies to value (lightness) rather than hue. 60% uses the lightest value (near-white), 30% uses a mid-gray, and 10% uses the darkest value (near-black) or the single accent color if one is present.

Can I use more than three colors with the 60-30-10 rule?

The rule is a proportion framework, not a strict three-color limit. With more colors, subdivide within each tier: 60% might use two related neutrals, 30% might use a warm and a cool secondary. Keep the accent tier (10%) to one or two colors maximum — too many accent colors create competition rather than focus.

What if my brand accent is a muted or desaturated color?

The accent does not need to be vivid — it needs contrast relative to the dominant. A muted terracotta against an ivory 60% dominant can work as a quiet accent. The key is that the 10% color is distinguishably different in some way (hue, value, or saturation) from both the 60% and 30% colors.

How do I generate a 60-30-10 palette for free?

Use the Color Palette Generator: enter your dominant color, select Complementary or Split-Complementary, and the two output colors become your secondary and accent. Assign the more neutral result to the 30% role and the more vivid result to the 10% accent role.