Aturan 60-30-10: Proporsi Warna dalam Desain

Interior designers have followed a simple ratio for decades: 60% dominant color, 30% secondary color, 10% accent color. The proportions are memorable, practical, and they work — not just in interiors, but in graphic design, web UI, illustration, and branding. Understanding why they work, and how to apply them well, gives you a reliable foundation for any color composition.

This is not a rigid law. It is a starting framework that produces harmonious results by default, freeing you to spend creative energy on content and form rather than trying to balance arbitrary color combinations.

What Is the 60-30-10 Rule?

The 60-30-10 rule divides the visual weight of a design across three color roles:

• 60% — Dominant color: The background or base color that establishes the overall tone. It covers the largest surface area and sets the mood.
• 30% — Secondary color: A complementary or harmonious color that adds visual variety without competing with the dominant. It often appears in major UI regions, furniture, or secondary content areas.
• 10% — Accent color: A high-energy or contrasting color used sparingly to draw attention to the most important elements — calls to action, key data, focal points.

The ratios are not precise measurements — you will not get out a ruler. They describe approximate visual weight, which is a function of both area and intensity. A small area of a vivid, saturated accent can have the same visual weight as a larger area of a muted secondary color.

The core insight is this: varying the amount of each color is just as important as choosing the colors themselves. Three colors used in roughly equal proportions tend to fight for dominance, creating visual tension. Three colors at 60-30-10 create a clear hierarchy where the eye moves naturally from dominant to secondary to accent.

The Dominant Color (60%)

The dominant color is the visual ground of your design. It appears as:

• Page or canvas backgrounds
• Primary navigation backgrounds
• Card and surface fills
• Large content regions (hero sections, full-width banners)

Because it covers the largest area, the dominant color should generally be quiet and comfortable for extended viewing. High-saturation dominants are fatiguing at this scale. Light, neutral, or muted tones work best in most contexts.

Dominant Color Examples

Soft off-white for a luxury editorial site: #F7F4F0 — a warm cream with barely any hue. It covers the entire page canvas. Nothing about it competes with content.

Light slate for a SaaS dashboard: #F1F5F9 — a cool, neutral gray-blue. At 60% of the visual field, it creates a professional, focused atmosphere.

Deep charcoal for a portfolio with dark mode: #1A1A2E — a very dark navy. Used as the dominant, it creates a sophisticated dark environment where lighter colors pop naturally.

The dominant color does not have to be white or gray. A muted sage, a warm taupe, or a deep ink navy can all serve as dominants — the key is that they do not demand attention at this scale.

Choosing Your Dominant

When selecting the dominant, ask: "Could I look at this color covering an entire page for thirty minutes without it becoming tiring?" If not, it is better suited to the secondary or accent role.

Use the Palette Generator to explore harmonious combinations once you have a dominant in mind. Entering your primary brand color often surfaces related hues that work well at each proportion.

The Secondary Color (30%)

The secondary color is the design's supporting character. It defines large regions within the dominant field — sidebars, headers, feature sections, card groups, major UI panels.

At 30% visual weight, the secondary has enough presence to establish variety and structure without overwhelming. It should relate to the dominant — either harmonizing (analogous on the color wheel) or contrasting cleanly (complementary or split-complementary) — while never fighting for the same attention.

Secondary Color Examples

Paired with the cream dominant (#F7F4F0): #E8DDD0 — a slightly warmer, slightly deeper warm beige. At 30%, it defines content cards and section backgrounds, creating subtle depth.

Paired with the slate dashboard dominant (#F1F5F9): #FFFFFF — pure white. Cards and panels sit on white within the slate-gray page. This increases perceived depth and organizes content clearly.

Paired with the dark navy dominant (#1A1A2E): #16213E — a slightly different dark blue. Panels and sidebars in this tone create architectural layers without introducing new hue.

Notice that secondary colors can be lighter or darker than the dominant — what matters is the relationship, not an absolute rule about which must be lighter.

Analogous vs Complementary Secondary

An analogous secondary (neighboring hue on the color wheel) produces a harmonious, cohesive feel. A warm dominant with a warm secondary feels unified and comfortable. This works well for brands communicating trust, stability, or warmth.

A complementary secondary (opposite on the color wheel) produces energy and contrast. A cool blue dominant with a muted warm secondary — perhaps a soft terracotta — creates visual dynamism while still feeling structured because the secondary is muted.

The Accent Color (10%)

The accent is where controlled drama lives. At only 10% visual weight, a saturated or contrasting accent creates maximum impact without tipping the balance. It should:

• Draw the eye directly to the most important interactive element or information
• Appear on calls to action, key statistics, highlights, active navigation states, and notification badges
• Be used sparingly — appearing everywhere means appearing nowhere

The accent does not need to harmonize with the dominant and secondary in the traditional color theory sense. Its job is to stand out. A complementary or triadic accent relative to your dominant or secondary is a reliable starting point.

Accent Color Examples

Completing the cream editorial palette: Dominant #F7F4F0 + Secondary #E8DDD0 + Accent #C04D1C

The terracotta accent is vivid and warm, completing a palette that feels like a high-end magazine. It appears on "Subscribe" buttons, article category tags, and highlighted pull quotes — nothing else.

Completing the SaaS dashboard palette: Dominant #F1F5F9 + Secondary #FFFFFF + Accent #3B82F6

The vivid blue accent appears on primary action buttons, active sidebar items, notification badges, and data visualization highlights. Every other color in the UI is achromatic, so the blue reads immediately as "interactive."

Completing the dark portfolio palette: Dominant #1A1A2E + Secondary #16213E + Accent #E94560

A vivid magenta-pink accent against the deep dark dominant creates the high-contrast, energetic feel associated with creative portfolios. It appears on hover states, active links, and feature highlights.

Choosing Your Accent

The accent should have the highest saturation and/or the strongest contrast against the dominant of any color in your palette. Test it: put the accent color on the dominant background in the Contrast Checker and confirm it reads clearly. An accent that does not stand out against the dominant has failed its job.

Applying 60-30-10 to Web UI

The proportions translate directly to web interface zones:

Note that text colors are not usually counted in the 60-30-10 ratio directly — they are part of the dominant field. A dark text on a light dominant background is still visually "within" the 60% zone.

Real Design Examples

Example 1: Sustainability Brand

This palette communicates nature, authenticity, and calm.

• Dominant (60%): #F5F0E8 — warm parchment white. Every page uses this as the canvas.
• Secondary (30%): #8FAF8C — muted sage green. Navigation header, feature section backgrounds, footer.
• Accent (10%): #2D5A3D — deep forest green. "Shop Now" and "Learn More" buttons, active links, highlighted statistics.

The dominant is warm and soft enough to feel organic. The secondary introduces green without overwhelming. The dark accent adds authority and contrast.

Example 2: Modern Fintech

This palette communicates clarity, precision, and trust.

• Dominant (60%): #FAFBFD — very slightly cool white. The near-white keeps the interface feeling light and spacious.
• Secondary (30%): #EEF2FF — very light indigo tint. Card backgrounds and sidebar have a subtle cool wash.
• Accent (10%): #4F46E5 — vivid indigo. All interactive elements — buttons, active states, chart highlights, progress bars.

Example 3: Dark Mode Creative Agency

This palette communicates sophistication and energy.

• Dominant (60%): #0D0D0D — near-black, slightly warm. The base for everything.
• Secondary (30%): #1A1A1A — slightly lighter dark gray. Cards, panels, modals sit slightly above the dominant.
• Accent (10%): #F5A623 — vivid amber-gold. The sole color in an otherwise monochromatic environment. It signals everything important.

Breaking the Rule Effectively

Rules in design exist to be broken — but breaking them intentionally, with an understanding of why they work, produces different results than breaking them accidentally.

When to Use a 70-20-10 Split

If your dominant color is strong or saturated, reducing the secondary's share reduces the risk of color fatigue. A dark dominant with a brighter secondary might benefit from moving the secondary down to 20%, giving the dominant more control.

When to Use a 60-20-20 Split

Introducing a second accent can work for complex products with distinct feature areas — for example, a dashboard where one section uses a blue accent (data features) and another uses an orange accent (alert/monitoring features). The risk is losing the hierarchy that makes the accent meaningful. Only add a second accent if the two have clearly defined and non-competing roles.

When to Use a Single Color

Monochromatic designs use one hue across all three roles, with lightness and saturation creating the proportional distinctions. The dominant is a light tint, the secondary a mid-range value, and the accent the full-saturation base or a dark shade. This works brilliantly when a brand color is strong enough to carry the entire design.

When to Throw It Out

Abstract art, expressive illustration, and experimental graphic design often intentionally break proportional conventions to create tension, complexity, or emotional density. The 60-30-10 rule is a tool for functional design — interfaces, editorial layouts, branding. In contexts where the goal is visual art rather than usability, treat it as one option among many.

Key Takeaways

• The 60-30-10 rule allocates visual weight to three color roles: 60% dominant (establishes mood), 30% secondary (adds structure and variety), 10% accent (directs attention).
• The dominant should be quiet enough to cover large areas without causing fatigue. Muted, neutral, or light tones work best.
• The secondary creates depth and section organization. It should relate to the dominant through harmony or clean contrast.
• The accent is where energy concentrates — calls to action, active states, and key data. Use it sparingly for maximum impact.
• Visual weight is a function of both area and intensity. A small, vivid accent can balance a large, muted secondary.
• Use the Palette Generator to explore dominant, secondary, and accent combinations from a starting hue.
• Breaking the rule is valid — but understand what you are trading away (hierarchy and visual calm) before you do.