How to Use the 60-30-10 Rule in Color Palette Design

The 60-30-10 rule is a color balance method where 60% of a design uses a dominant color, 30% uses a secondary color, and 10% uses an accent color. It helps designers create hierarchy without guessing how much of each color to use.

The rule works for websites, brand systems, interiors, social graphics, decks, and UI layouts. It is a starting framework, not a strict law.

What is the 60-30-10 rule in color design?

The 60-30-10 rule divides color use into three roles:

• 60% dominant color
• 30% secondary color
• 10% accent color

For a website, this can mean:

• 60% background: #FFFFFF
• 30% surface and section color: #F8FAFC
• 10% accent: #2563EB

For an interior palette, this can mean:

• 60% wall color
• 30% furniture or textiles
• 10% decor accents

The point is balance. The accent color stays noticeable because it appears less often.

Why does the 60-30-10 rule work?

The rule works because it gives each color a visual role. Designers do not need every color to compete for attention.

The dominant color creates the overall environment. The secondary color adds depth and variation. The accent color points to important details.

This helps with:

• Visual hierarchy
• Brand consistency
• Readable layouts
• Easier design decisions
• More controlled accent use

Without a balance rule, many palettes become either too flat or too busy.

How to use the 60-30-10 rule for websites

Websites can use the 60-30-10 rule by assigning colors to layout roles.

Example website palette:

• Dominant 60%: #FFFFFF
• Secondary 30%: #F8FAFC
• Accent 10%: #2563EB
• Text: #111827
• Border: #E5E7EB

The 60% color covers page backgrounds and open space. The 30% color covers cards, sections, and panels. The 10% accent covers buttons, links, focus states, and small highlights.

Try this structure in the Colortion generator when you want a clean web palette.

How to use the 60-30-10 rule for dark UI

Dark UI needs a slightly different interpretation because the background and surface colors may both be dark.

Example dark UI palette:

• Dominant 60%: #0F172A
• Secondary 30%: #1E293B
• Accent 10%: #38BDF8
• Text: #F8FAFC
• Border: #334155

The dominant color holds the app background. The secondary color creates cards, sidebars, and modals. The accent color marks active states, links, and primary actions.

Do not count text as the main 10% accent. Text is functional and should remain readable across the whole interface.

How to use the 60-30-10 rule for branding

Brand systems can use the rule to define how colors appear across websites, social graphics, packaging, and decks.

Example brand palette:

• Dominant 60%: #FAF7F0
• Secondary 30%: #87A878
• Accent 10%: #C46A3A
• Text: #2F3136
• Support: #D8C3A5

Use the dominant color for backgrounds and large surfaces. Use the secondary color for brand sections or repeated visual blocks. Use the accent color for labels, icons, and calls to action.

This keeps the brand recognizable without making every asset feel overloaded.

Can neutral colors count in the 60-30-10 rule?

Neutral colors can count, and they often make the best 60% base. White, cream, charcoal, navy, beige, and light gray give layouts space.

Good neutral base colors include:

• White: #FFFFFF
• Off-white: #FAFAFA
• Cream: #FAF7F0
• Light gray: #F8FAFC
• Charcoal: #111827
• Navy: #0F172A

If the dominant color is neutral, the accent color becomes easier to notice. That is useful for websites, apps, and presentations.

When should designers break the 60-30-10 rule?

Designers can break the rule when the project has a clear reason. Editorial layouts, expressive campaign pages, data dashboards, and illustration-heavy brands may need different proportions.

Break the rule when:

• The design uses photography as the main color source
• A dashboard needs multiple status colors
• A campaign needs a bold single-color takeover
• A brand system has strict color requirements
• A dark UI needs several surface levels

Even then, the rule remains a useful check. If a design feels busy, reduce accent coverage. If it feels flat, strengthen the secondary color or add a controlled accent.

Common 60-30-10 mistakes

The most common mistake is treating the rule as three random colors. The colors need roles.

Avoid these mistakes:

• Using the accent color for too many elements
• Forgetting a readable text color
• Counting every neutral as separate visual weight
• Using two saturated colors for 60% and 30%
• Ignoring contrast on buttons
• Applying the same ratio to every section without judgment

The rule should make decisions easier, not make layouts mechanical.

60-30-10 examples by palette style

Different palette styles can use the same rule with different color roles.

Soft pastel example

• 60% warm white: #FFF8F2
• 30% blush: #F7C5CC
• 10% slate: #334155

This keeps the design soft while using slate as the practical accent for text, buttons, and icons.

Earth tone example

• 60% cream: #F7F0E6
• 30% terracotta: #C46A3A
• 10% sage: #87A878

This works for interiors, packaging, and editorial layouts. Cream gives space, terracotta creates warmth, and sage adds natural contrast.

Professional web example

• 60% white: #FFFFFF
• 30% light gray: #F8FAFC
• 10% blue: #2563EB

This works for SaaS pages, dashboards, and documentation because the accent color clearly marks action.

How to apply the rule to components

The 60-30-10 rule should map to actual components, not abstract percentages only.

For a website:

• 60%: page background, hero background, empty space
• 30%: cards, forms, navigation sections, secondary panels
• 10%: buttons, links, active states, badges, icons

For a brand kit:

• 60%: packaging base, website background, presentation slides
• 30%: brand blocks, image overlays, repeated graphic shapes
• 10%: stickers, labels, calls to action, small marks

For an interior:

• 60%: walls or large surfaces
• 30%: furniture, rugs, curtains, cabinets
• 10%: pillows, art, lighting, decor

Mapping colors to components helps designers apply the rule consistently.

How to test a 60-30-10 palette

Test the palette by building one realistic layout. Swatches alone do not show whether the ratio works.

Useful tests include:

• A website hero section
• A pricing card layout
• A social media carousel
• A presentation title slide
• A packaging label
• A room mood board

If the accent color feels too loud, reduce its coverage. If the design feels flat, strengthen the 30% secondary color or increase contrast between the 60% and 30% colors.

60-30-10 checklist

Before using the rule, check these points:

• The 60% color gives enough breathing room
• The 30% color clearly supports the layout
• The 10% accent is reserved for important details
• Text colors remain readable
• The palette has enough contrast
• The ratio fits the project type
• The accent does not compete with warning or error colors

This keeps the rule practical for real design work.

FAQ

What is the 60-30-10 rule in color design?

The 60-30-10 rule is a color balance method where 60% of a design uses a dominant color, 30% uses a secondary color, and 10% uses an accent color.

Does the 60-30-10 rule work for websites?

Yes. Websites can use the rule by assigning 60% to backgrounds, 30% to surfaces or sections, and 10% to buttons, links, and highlights.

Can neutral colors count in the 60-30-10 rule?

Yes. Neutral colors often make the best 60% base because they give layouts space and keep accent colors meaningful.

Should every palette follow the 60-30-10 rule?

No. The rule is a useful starting framework, but designers can adjust it for dark UI, editorial layouts, data dashboards, and brand systems.

Browse color palettes on Colortion when you want 5-color combinations that are easy to assign into 60-30-10 roles.