Die 60-30-10-Regel: Farbproportionen im Design

Innenarchitekten folgen seit Jahrzehnten einem einfachen Verhältnis: 60 % Dominantfarbe, 30 % Sekundärfarbe, 10 % Akzentfarbe. Die Proportionen sind einprägsam, praktisch und funktionieren – und zwar nicht nur in Innenräumen, sondern auch im Grafikdesign, Web-UI, Illustration und Branding. Wer versteht, warum sie funktionieren und wie man sie richtig einsetzt, hat eine zuverlässige Grundlage für jede Farbkomposition.

Das ist kein starres Gesetz, sondern ein Ausgangsrahmen, der standardmäßig harmonische Ergebnisse erzeugt und kreative Energie für Inhalte und Form freisetzt, anstatt diese in das Ausbalancieren beliebiger Farbkombinationen zu investieren.

Was ist die 60-30-10-Regel?

Die 60-30-10-Regel verteilt das visuelle Gewicht eines Designs auf drei Farbrollen:

• 60 % – Dominantfarbe: Die Hintergrund- oder Basisfarbe, die den Grundton festlegt. Sie bedeckt die größte Fläche und bestimmt die Stimmung.
• 30 % – Sekundärfarbe: Eine komplementäre oder harmonische Farbe, die optische Abwechslung schafft, ohne mit der Dominantfarbe zu konkurrieren. Sie erscheint häufig in wichtigen UI-Bereichen, Möbeln oder sekundären Inhaltsbereichen.
• 10 % – Akzentfarbe: Eine energiegeladene oder kontrastierende Farbe, die sparsam eingesetzt wird, um die Aufmerksamkeit auf die wichtigsten Elemente zu lenken – Handlungsaufforderungen, Schlüsseldaten, Blickfänger.

Die Verhältnisse sind keine präzisen Messungen – ein Lineal ist hier fehl am Platz. Sie beschreiben das ungefähre visuelle Gewicht, das sowohl von Fläche als auch von Intensität abhängt. Eine kleine, lebhafte, gesättigte Akzentfläche kann dasselbe visuelle Gewicht haben wie eine größere, gedämpfte Sekundärfläche.

Der Kerngedanke ist folgender: Die eingesetzte Menge jeder Farbe ist ebenso wichtig wie die Wahl der Farben selbst. Drei Farben in annähernd gleichen Anteilen kämpfen um Dominanz und erzeugen visuelle Spannung. Drei Farben im Verhältnis 60-30-10 schaffen eine klare Hierarchie, in der das Auge natürlich von Dominant zu Sekundär zu Akzent wandert.

Die Dominantfarbe (60 %)

Die Dominantfarbe ist der visuelle Untergrund Ihres Designs. Sie erscheint als:

• Seiten- oder Leinwandhintergrund
• Primäre Navigationshintergründe
• Karten- und Oberflächenfüllungen
• Große Inhaltsbereiche (Hero-Sektionen, vollbreite Banner)

Da sie die größte Fläche einnimmt, sollte die Dominantfarbe im Allgemeinen ruhig und für längeres Betrachten angenehm sein. Stark gesättigte Dominanten ermüden in diesem Maßstab. Helle, neutrale oder gedämpfte Töne funktionieren in den meisten Kontexten am besten.

Beispiele für Dominantfarben

Weiches Gebrochenes Weiß für eine luxuriöse Editorial-Seite: #F7F4F0 – ein warmes Creme mit kaum wahrnehmbarem Farbton. Es bedeckt die gesamte Seitenoberfläche, ohne den Inhalt zu beeinträchtigen.

Helles Schiefer für ein SaaS-Dashboard: #F1F5F9 – ein kühles, neutrales Grau-Blau. Bei 60 % des Sichtfeldes schafft es eine professionelle, fokussierte Atmosphäre.

Tiefes Dunkelgrau für ein Portfolio im Dark Mode: #1A1A2E – ein sehr dunkles Navy. Als Dominant eingesetzt, schafft es eine elegante dunkle Umgebung, in der hellere Farben natürlich hervorstechen.

Die Dominantfarbe muss nicht weiß oder grau sein. Ein gedämpftes Salbeigrün, ein warmes Taupe oder ein tiefes Tinten-Navy können alle als Dominant dienen – entscheidend ist, dass sie in diesem Maßstab keine Aufmerksamkeit einfordern.

Die Dominantfarbe auswählen

Bei der Auswahl der Dominantfarbe fragen Sie sich: „Könnte ich diese Farbe, die eine ganze Seite bedeckt, dreißig Minuten lang betrachten, ohne dass sie ermüdend wird?" Wenn nicht, ist sie besser für die Sekundär- oder Akzentrolle geeignet.

Nutzen Sie den Palette Generator, um harmonische Kombinationen zu erkunden, sobald Sie eine Dominante im Sinn haben. Die Eingabe Ihrer primären Markenfarbe zeigt oft verwandte Farbtöne, die bei jeder Proportion gut funktionieren.

Die Sekundärfarbe (30 %)

Die Sekundärfarbe ist die unterstützende Figur des Designs. Sie definiert große Bereiche innerhalb des Dominantfeldes – Seitenleisten, Kopfzeilen, Feature-Sektionen, Kartengruppen, wichtige UI-Panels.

Mit 30 % visueller Wirkung ist die Sekundärfarbe präsent genug, um Abwechslung und Struktur zu schaffen, ohne zu überwältigen. Sie sollte mit der Dominanten in Beziehung stehen – entweder harmonisierend (analog auf dem Farbkreis) oder sauber kontrastierend (komplementär oder split-komplementär) – ohne um dieselbe Aufmerksamkeit zu konkurrieren.

Beispiele für Sekundärfarben

Kombiniert mit der Creme-Dominante (#F7F4F0): #E8DDD0 – ein etwas wärmeres, etwas tieferes warmes Beige. Bei 30 % definiert es Inhaltskarten und Sektionshintergründe und schafft subtile Tiefe.

Kombiniert mit der Schiefer-Dashboard-Dominante (#F1F5F9): #FFFFFF – reines Weiß. Karten und Panels sitzen auf Weiß innerhalb der schiefergrauen Seite. Dies erhöht die wahrgenommene Tiefe und organisiert den Inhalt klar.

Kombiniert mit der dunklen Navy-Dominante (#1A1A2E): #16213E – ein leicht anderes Dunkelblau. Panels und Seitenleisten in diesem Ton schaffen architektonische Ebenen, ohne einen neuen Farbton einzuführen.

Sekundärfarben können heller oder dunkler als die Dominante sein – entscheidend ist die Beziehung, nicht eine absolute Regel darüber, welche heller sein muss.

Analoge vs. komplementäre Sekundärfarbe

Eine analoge Sekundärfarbe (benachbarter Farbton auf dem Farbkreis) erzeugt ein harmonisches, einheitliches Gefühl. Eine warme Dominante mit einer warmen Sekundärfarbe wirkt geeint und angenehm. Das funktioniert gut für Marken, die Vertrauen, Stabilität oder Wärme kommunizieren.

Eine komplementäre Sekundärfarbe (gegenüberliegend auf dem Farbkreis) erzeugt Energie und Kontrast. Eine kühle blaue Dominante mit einer gedämpften warmen Sekundärfarbe – etwa ein sanftes Terrakotta – schafft visuelle Dynamik und wirkt dennoch strukturiert, weil die Sekundärfarbe gedämpft ist.

Die Akzentfarbe (10 %)

Der Akzent ist der Bereich kontrollierter Dramatik. Bei nur 10 % visueller Wirkung erzeugt eine gesättigte oder kontrastierende Akzentfarbe maximalen Eindruck, ohne die Balance zu kippen. Sie sollte:

• Das Auge direkt auf das wichtigste interaktive Element oder die wichtigste Information lenken
• Bei Handlungsaufforderungen, Schlüsselstatistiken, Hervorhebungen, aktiven Navigationszuständen und Benachrichtigungsabzeichen erscheinen
• Sparsam eingesetzt werden – überall präsent sein bedeutet, nirgends aufzufallen

Der Akzent muss sich nicht im traditionellen farbtheoretischen Sinne mit der Dominant- und Sekundärfarbe harmonisieren. Seine Aufgabe ist es, hervorzustechen. Ein komplementärer oder triadischer Akzent relativ zu Ihrer Dominant- oder Sekundärfarbe ist ein zuverlässiger Ausgangspunkt.

Beispiele für Akzentfarben

Abschluss der Creme-Editorial-Palette: Dominant #F7F4F0 + Sekundär #E8DDD0 + Akzent #C04D1C

Der Terrakotta-Akzent ist leuchtend und warm und vervollständigt eine Palette, die wie ein hochwertiges Magazin wirkt. Er erscheint auf „Abonnieren"-Schaltflächen, Artikelkategorie-Tags und hervorgehobenen Zitaten – nirgendwo sonst.

Abschluss der SaaS-Dashboard-Palette: Dominant #F1F5F9 + Sekundär #FFFFFF + Akzent #3B82F6

Der lebhafte blaue Akzent erscheint auf primären Aktionsschaltflächen, aktiven Seitenleistenelementen, Benachrichtigungsabzeichen und Highlights in Datenvisualisierungen. Jede andere Farbe im UI ist achromatisch, daher wird Blau sofort als „interaktiv" wahrgenommen.

Abschluss der dunklen Portfolio-Palette: Dominant #1A1A2E + Sekundär #16213E + Akzent #E94560

Ein lebhafter Magenta-Pink-Akzent gegen die tiefe dunkle Dominante erzeugt den hohen Kontrast und die energiegeladene Wirkung, die mit kreativen Portfolios assoziiert wird. Er erscheint bei Hover-Zuständen, aktiven Links und Feature-Highlights.

Die Akzentfarbe auswählen

Der Akzent sollte die höchste Sättigung und/oder den stärksten Kontrast gegenüber der Dominante in Ihrer Palette haben. Testen Sie ihn: Platzieren Sie die Akzentfarbe auf dem Dominanthintergrund im Kontrastprüfer und bestätigen Sie, dass sie klar ablesbar ist. Ein Akzent, der sich nicht von der Dominante abhebt, hat seine Aufgabe verfehlt.

60-30-10 auf Web-UIs anwenden

Die Proportionen übertragen sich direkt auf Webinterface-Zonen:

Textfarben werden in der 60-30-10-Regel normalerweise nicht direkt gezählt – sie gehören zum Dominantfeld. Dunkler Text auf einem hellen Dominanthintergrund ist visuell noch „im Bereich" der 60 %-Zone.

Reale Designbeispiele

Beispiel 1: Nachhaltigkeitsmarke

Diese Palette kommuniziert Natur, Authentizität und Ruhe.

• Dominant (60 %): #F5F0E8 – warmes Pergamentweiß. Jede Seite verwendet dies als Leinwand.
• Sekundär (30 %): #8FAF8C – gedämpftes Salbeigrün. Navigationsheader, Feature-Sektionshintergründe, Fußzeile.
• Akzent (10 %): #2D5A3D – tiefes Waldgrün. „Jetzt kaufen"- und „Mehr erfahren"-Schaltflächen, aktive Links, hervorgehobene Statistiken.

Die Dominante ist warm und sanft genug, um organisch zu wirken. Die Sekundärfarbe führt Grün ein, ohne zu überwältigen. Der dunkle Akzent verleiht Autorität und Kontrast.

Beispiel 2: Modernes Fintech

Diese Palette kommuniziert Klarheit, Präzision und Vertrauen.

• Dominant (60 %): #FAFBFD – sehr leicht kühles Weiß. Das Beinahe-Weiß lässt das Interface leicht und luftig wirken.
• Sekundär (30 %): #EEF2FF – sehr heller Indigo-Ton. Kartenhintergründe und Seitenleiste erhalten einen subtilen kühlen Hauch.
• Akzent (10 %): #4F46E5 – lebhaftes Indigo. Alle interaktiven Elemente – Schaltflächen, aktive Zustände, Chart-Highlights, Fortschrittsbalken.

Beispiel 3: Dark-Mode-Kreativagentur

Diese Palette kommuniziert Eleganz und Energie.

• Dominant (60 %): #0D0D0D – nahezu Schwarz, leicht warm. Die Basis für alles.
• Sekundär (30 %): #1A1A1A – etwas helleres Dunkelgrau. Karten, Panels, Modals sitzen leicht über der Dominante.
• Akzent (10 %): #F5A623 – lebhaftes Bernsteingelb. Die einzige Farbe in einer ansonsten monochromatischen Umgebung – sie signalisiert alles Wichtige.

Die Regel effektiv brechen

Regeln im Design sind dazu da, gebrochen zu werden – aber bewusstes Brechen mit einem Verständnis dafür, warum sie funktionieren, liefert andere Ergebnisse als unbeabsichtigtes Brechen.

Wann man eine 70-20-10-Aufteilung verwendet

Wenn Ihre Dominantfarbe stark oder gesättigt ist, reduziert ein kleinerer Sekundäranteil das Risiko von Farmmüdigkeit. Eine dunkle Dominante mit einer helleren Sekundärfarbe könnte davon profitieren, den Sekundäranteil auf 20 % zu reduzieren, um der Dominante mehr Kontrolle zu geben.

Wann man eine 60-20-20-Aufteilung verwendet

Das Einführen eines zweiten Akzents kann bei komplexen Produkten mit unterschiedlichen Feature-Bereichen funktionieren – zum Beispiel einem Dashboard, in dem ein Bereich einen blauen Akzent (Datenfunktionen) und ein anderer einen orangen Akzent (Alarm-/Überwachungsfunktionen) verwendet. Das Risiko besteht darin, die Hierarchie zu verlieren, die den Akzent bedeutsam macht. Fügen Sie einen zweiten Akzent nur hinzu, wenn die beiden klar definierte und nicht konkurrierende Rollen haben.

Wann man eine einzelne Farbe verwendet

Monochromatische Designs verwenden einen Farbton für alle drei Rollen, wobei Helligkeit und Sättigung die proportionalen Unterschiede schaffen. Die Dominante ist ein heller Tint, die Sekundärfarbe ein mittlerer Wert und der Akzent die vollgesättigte Basis oder ein dunkler Farbton. Das funktioniert brillant, wenn eine Markenfarbe stark genug ist, das gesamte Design zu tragen.

Wann man die Regel verwirft

Abstrakte Kunst, ausdrucksstarke Illustration und experimentelles Grafikdesign brechen proportionale Konventionen oft absichtlich, um Spannung, Komplexität oder emotionale Dichte zu erzeugen. Die 60-30-10-Regel ist ein Werkzeug für funktionales Design – Interfaces, Editorial-Layouts, Branding. In Kontexten, in denen das Ziel bildende Kunst statt Benutzerfreundlichkeit ist, betrachten Sie sie als eine Möglichkeit unter vielen.

Wichtigste Erkenntnisse

• Die 60-30-10-Regel verteilt das visuelle Gewicht auf drei Farbrollen: 60 % Dominant (bestimmt die Stimmung), 30 % Sekundär (fügt Struktur und Abwechslung hinzu), 10 % Akzent (lenkt die Aufmerksamkeit).
• Die Dominante sollte ruhig genug sein, um große Flächen zu bedecken, ohne zu ermüden. Gedämpfte, neutrale oder helle Töne funktionieren am besten.
• Die Sekundärfarbe schafft Tiefe und Sektionsorganisation. Sie sollte durch Harmonie oder sauberen Kontrast mit der Dominanten in Beziehung stehen.
• Der Akzent ist der Bereich, in dem Energie konzentriert wird – Handlungsaufforderungen, aktive Zustände und Schlüsseldaten. Sparsam eingesetzt, entfaltet er maximale Wirkung.
• Das visuelle Gewicht ist eine Funktion von Fläche und Intensität. Ein kleiner, lebhafter Akzent kann eine große, gedämpfte Sekundärfarbe ausbalancieren.
• Nutzen Sie den Palette Generator, um Dominant-, Sekundär- und Akzent-Kombinationen ausgehend von einem Ausgangsfarbton zu erkunden.
• Regelbrechen ist legitim – aber verstehen Sie, was Sie dabei aufgeben (Hierarchie und visuelle Ruhe), bevor Sie es tun.