Die 60-30-10-Regel: Farbe im Design ausbalancieren

Als die 60-30-10-Regel das erste Mal wirklich bei mir Klick machte, starrte ich auf ein Dashboard, das ich gebaut hatte und das auf eine Weise unruhig aussah, die ich nicht erklären konnte. Die Palette war in Ordnung. Die Farben waren harmonisch, direkt vom Farbkreis gezogen. Aber der Bildschirm fühlte sich laut an, als würden alle im Raum gleichzeitig reden. Das Problem war nicht, welche Farben ich gewählt hatte. Es war, wie viel von jeder ich verwendet hatte.

Genau diese Unterscheidung ist der ganze Sinn der 60-30-10-Regel. Sie sagt fast nichts über den Farbton und fast alles über die Proportion: Grob 60 % deines Designs sind eine Dominantfarbe, 30 % eine sekundäre Stützfarbe und 10 % ein Akzent. Bring diese Verhältnisse richtig hin, und selbst eine mittelmäßige Palette liest sich als gewollt. Bring sie falsch hin, und die sorgfältigst abgestimmte Harmonie wirkt trotzdem chaotisch.

Woher die Regel stammt

Die 60-30-10-Regel wurde aus der Innenarchitektur entlehnt, wo Einrichter sie seit Jahrzehnten nutzen, um einen Raum auszubalancieren. Die klassische Aufteilung: 60 % entfallen auf die Wände, etwa 30 % auf Polster und größere Möbel und die letzten 10 % auf Accessoires – ein Zierkissen, eine Vase, das Bild an der Wand. Betritt man einen gut gestalteten Raum, kann man meist nicht in Worte fassen, warum er ruhig wirkt, aber die Proportionen leisten im Hintergrund still ihre Arbeit.

Mode-Stylisten nutzen dieselbe Logik (Anzug, Hemd, Einstecktuch), und irgendwann wanderte sie ins Grafik- und Webdesign. Das Medium änderte sich; das Prinzip nicht. Du gibst jeder Farbe eine definierte Rolle und einen definierten Platzanteil, und die Balance folgt fast von selbst.

Wie sie sich auf UI- und Webdesign übertragen lässt

Hier ist die Übersetzung, die ich tatsächlich nutze, wenn ich mich hinsetze, um eine Oberfläche zu bauen.

• 60 % – die Dominantfarbe. Das ist deine Leinwand: Seitenhintergründe, große Flächen, der Leerraum, auf dem dein Inhalt sitzt. Sie setzt die Gesamtstimmung und ist, entscheidend, meist die Farbe, die die Leute nicht bemerken. In den meisten guten Oberflächen ist das Dominant ein Neutral – ein Weiß, Cremeweiß, Hellgrau oder im Dark Mode ein Beinahe-Schwarz wie #0F1115. Neutrale sind dominant, weil sie großzügig sind; sie lassen die anderen Farben die Persönlichkeit tragen, ohne mit ihnen zu kämpfen.
• 30 % – die Sekundärfarbe. Das ist die Nebenbesetzung: Karten, Seitenleisten, Navigationsleisten, Abschnittstrenner, sekundäre Flächen. Sie liefert Struktur und eine zweite Kontrastebene gegen das Dominant, fordert aber nie Aufmerksamkeit ein. Stell sie dir als die Möbel im Raum vor.
• 10 % – die Akzentfarbe. Hier wohnt die Aktion: primäre Buttons, Links, aktive Zustände, Badges, die eine Datenreihe im Diagramm, die die Leute verfolgen sollen. Sie ist das Zierkissen. Der ganze Grund, warum sie funktioniert, ist Knappheit.

Diesen letzten Punkt verpassen die meisten, also sage ich ihn klar. Der Akzent ist nicht wegen der Farbe stark. Er ist stark, weil es so wenig davon gibt. Wenn dein Blau nur auf dem primären Button und dem aktiven Navigationspunkt erscheint, lernt das Auge eines Nutzers in etwa zwei Sekunden, dass Blau „hier handeln“ bedeutet. In dem Moment, in dem Blau auch auf Überschriften, Symbolen, drei Kartenrändern und einem Hintergrundverlauf auftaucht, bedeutet es nichts mehr. Du hast das Signal verbraucht.

Ein durchgerechnetes Beispiel

Lass mich ein echtes bauen, damit die Proportionen nicht abstrakt bleiben. Sagen wir, ich gestalte ein SaaS-Dashboard und öffne den Color Palette Generator, wähle ein ruhiges Blau als Basis und nutze die monochromatische und komplementäre Harmonie, um Stütztöne zu ziehen.

• Dominant (60 %): #F7F8FA, ein fast weißes, kühles Grau. Es ist der Seitenhintergrund und der Leerraum innerhalb der Karten. Du nimmst es kaum wahr, was genau richtig ist.
• Sekundär (30 %): #1E293B, ein tiefes Schiefer. Es trägt die obere Navigation, die Seitenleiste, Überschriften und den Fließtext. Beachte, dass „sekundär“ keine kräftige Farbe sein muss – hier ist es ein dunkles Neutral, das schwere strukturelle Arbeit leistet. Zusammen mit dem Dominant ist das bereits eine vollständige, benutzbare Oberfläche.
• Akzent (10 %): #2563EB, ein selbstbewusstes Blau, reserviert für den primären CTA, Links und den aktiven Menüzustand. Nichts sonst bekommt es.

Lass dieses Blau durch einen Kontrast-Checker gegen den weißen Hintergrund laufen, und du liegst bequem über der WCAG-AA-Schwelle von 4,5:1 für normalen Text – was sich zu bestätigen lohnt, denn ein Akzent, der beim Kontrast durchfällt, ist ein Akzent, der bei seiner einen Aufgabe durchfällt. (Mehr dazu in WCAG-Kontrastverhältnisse erklärt.) Der eingebaute Checker im Werkzeug markiert dir das, bevor es ausgeliefert wird.

Was die meisten an dieser Palette verblüfft, ist, wie wenig Farbe sie tatsächlich enthält. Zwei Neutrale und ein Blau. Das ist die 60-30-10-Regel, wie sie gedacht ist – Zurückhaltung liest sich als Politur.

Warum Proportion die Farbtonwahl schlägt

Ich stelle eine leicht konträre Behauptung auf: Für eine Oberfläche zählt es mehr, die Proportionen richtig hinzubekommen, als die exakten Farbtöne. Du kannst meinen #2563EB-Akzent gegen ein Türkis, ein Violett oder ein warmes Korall tauschen, und das Design wird sich weiterhin komponiert anfühlen, weil die Struktur hält. Aber nimm eine wunderschön gewählte, perfekt harmonische Drei-Farben-Palette und wende sie in gleichen Dritteln an, und sie sieht aus wie ein Parkschild.

Das ist befreiend, sobald du es verinnerlichst. Es bedeutet, dass ein Anfänger kein perfektes Auge für Farbe braucht – er braucht Disziplin darüber, wie viel von jeder Farbe er einsetzt. Wähle irgendeine solide Harmonie (analog und splitkomplementär sind beide nachsichtige Ausgangspunkte; siehe Farbharmonie im UI-Design verstehen dazu, wie man wählt), weise dann Rollen zu und rationiere den Akzent gnadenlos.

Die Nielsen Norman Group macht in ihrer Arbeit über Farbe zur Verbesserung von Design einen verwandten Punkt: Farbe trägt Bedeutung am besten, wenn sie sparsam und konsistent eingesetzt wird. Die 60-30-10-Aufteilung ist im Grunde ein praktisches Rezept für genau diese Sparsamkeit.

Die Fehler, die ich am häufigsten sehe

Kein klares Dominant. Das ist das Dashboard-Problem, mit dem ich begonnen habe. Drei Farben mit nahezu gleichem Gewicht, keine davon klar die Leinwand, und das Auge hat keinen Ort zum Ausruhen. Behebung: Wähle eine Farbe (meist ein Neutral) und verpflichte sie auf grob 60 % der Fläche, bevor du irgendetwas anderes platzierst.

Übermäßiger Akzenteinsatz. Der mit großem Abstand häufigste Fehlschlag. Der Akzent schleicht sich auf Überschriften, dann auf Symbole, dann auf ein paar Rahmen, und binnen eines Nachmittags hat das Design keinen Blickfang mehr. Eine nützliche Bauchprüfung: Wenn du auf einem gegebenen Bildschirm schnell auf mehr als eine Handvoll verschiedene Stellen zeigen kannst, an denen dein Akzent auftaucht, hast du ihn wahrscheinlich überstrapaziert. Zieh ihn zurück auf echte interaktive Momente.

Die Zahlen als Evangelium behandeln. Sie sind ein Verhältnis, kein Maß. Niemand zählt Pixel. 60-30-10 ist eine Kurzformel für „ein Dominant, eine Stütze, ein Seltenes“. Wenn deine Aufteilung näher bei 70-20-10 landet, in Ordnung. Worauf es ankommt, ist die Hierarchie, nicht die Dezimalzahl.

Vergessen, dass die Regel rekursiv skaliert. Innerhalb einer einzelnen Karte kannst du dieselben Proportionen erneut anwenden – überwiegend Fläche, etwas strukturelles Detail, ein Hauch Akzent. Und die Regel reist sauber in den Dark Mode: Deine 60 % werden einfach zu einem dunklen Neutral statt zu einem hellen, mit Akzenten, die oft eine leichte Entsättigung brauchen, um nicht zu glühen. Wenn du dorthin gehst, gräbt Best Practices für Dark-Mode-Farbpaletten in die Anpassungen.

Daraus eine wiederholbare Methode machen

Hier ist der Workflow, den ich einem Junior-Designer in die Hand geben würde.

• Wähle zuerst eine Harmonie. Öffne den Farbkreis, wähle einen Basisfarbton und erzeuge ein verwandtes Set – analog für Ruhe, komplementär für Wucht. Überdenk die exakten Hex-Werte noch nicht.
• Weise das Dominant zu. Lege deine 60 % fest. In neun von zehn Fällen ist es ein Neutral. Hell als Standard, dunkel für den Dark Mode.
• Weise die Sekundärfarbe zu. Wähle die 30 %, die Struktur geben – oft ein zweites Neutral oder eine gedämpfte Version deiner Markenfarbe. Bestätige, dass Dominant und Sekundär allein ein funktionierendes Layout ergeben.
• Rationiere den Akzent. Zieh eine kräftige Farbe für die 10 %. Prüfe ihren Kontrast gegen die Flächen, die sie berühren wird. Dann beschütze ihn – jedes Mal, wenn du versucht bist, ihn wiederzuverwenden, frag dich, ob dieses Element wirklich interaktiv ist.
• Prüfe durch Zusammenkneifen der Augen. Tritt zurück, lass deinen Blick verschwimmen und sieh auf den Bildschirm. Du solltest ein ruhiges Feld mit ein oder zwei hellen Punkten sehen, die deinen Blick ziehen. Wenn das Ganze schimmert, ist dein Akzent durchgesickert.

Der Grund, warum diese Regel den Sprung vom Wohnzimmer ins Dashboard überlebt hat, ist, dass sie ein Problem löst, das die Leute spüren, bevor sie es benennen können. Farbe in einem Design dreht sich nicht wirklich um Geschmack – sie dreht sich um Budget. Die 60-30-10-Regel ist einfach eine vernünftige Art, es auszugeben. Wenn du einen Satz Farbtöne vor dem Festlegen auf die Probe stellen willst, leg sie in den Color Palette Generator, prüfe den Kontrast und stell dann die härtere Frage, die das Werkzeug dir nicht beantworten kann: nicht sind das die richtigen Farben, sondern wie viel von jeder bin ich im Begriff zu verwenden.