Wie viele Farben sollte meine Website verwenden? die 60-30-10-Regel und wann man sie brechen sollte
design · Oct 6, 2026 · 5 min read
Die ehrliche Antwort ist eine Zahl, die klein genug ist, um einen Plan darzustellen: Eine Farbe erledigt die Arbeit, eine unterstützt sie, ein Akzent für die Aktion. plus Neutraltöne – die Weiß-, Schwarz- und Grautöne, die technisch gesehen Farben sind, aber als Leinwand fungieren. Alles andere ist Dekoration, die den Besucher dazu auffordert, mehr im Kopf zu behalten, als Ihre Botschaft verdient.
Das ist kein Geschmackssache, sondern Arithmetik: Jede zusätzliche Farbe vervielfacht die Kombinationen, die Ihre Seite erzeugen kann, und die meisten dieser Kombinationen sind schlechter als die Basis. Zurückhaltung ist es, was die verbleibenden Entscheidungen bewusst erscheinen lässt.
die 60-30-10-Aufteilung, übersetzt für Websites
Die Innenarchitekturregel bleibt bestehen, weil sie funktioniert:
- 60 Prozent – die Leinwand. Hintergrund und Neutraltöne. Hier lebt der weiße Raum des gesamten Geländes und der größte Bereich ist der ruhigste.
- 30 Prozent – die Unterstützung. Die Hauptfarbe Ihrer Marke: Kopfzeilen, Karten, die Orte, an denen Informationen gruppiert werden. Es stellt die Temperatur des Standorts ein.
- 10 Prozent – der Akzent. eine gesättigte Farbe, die für die Dinge reserviert ist, die wirken: Schaltflächen, Links, der aktuelle Status. Der springende Punkt eines Akzents ist die Knappheit – sobald fünf Farben gleich laut sind, ist keine ein Akzent und nichts deutet irgendwo hin.
Wenn Sie what makes a website look cheap gelesen haben, haben Sie den Fehlermodus bereits von der anderen Seite gesehen: Zu viele Farben sind eine der lautesten Anzeichen, die es gibt.
wie man die tatsächlichen Farben auswählt
Beginnen Sie mit der Marke, nicht mit der Palettenauswahl: Wenn das Unternehmen ein Logo hat, besitzt es bereits eine Farbe. das sind deine 30. dann:
- Wählen Sie den Akzent nach Auftrag, nicht nach Vorliebe – es ist die Farbe von machen Sie das Ding, also muss es einen starken Kontrast zur Leinwand und zum Untergrund bilden. Blau und Orange funktionieren aus gutem Grund in tausend Decks.
- Erweitern Sie zuerst die Neutralleiter. Die meisten „Wir brauchen mehr Farben“-Momente sind eigentlich „unsere Grautöne haben keine Auswahl“: Eine gute neutrale Leiter (Hintergrund, Oberfläche, Rand, Text) erzeugt Tiefe, ohne einen Farbton hinzuzufügen.
- Überprüfen Sie die Paarung auf Lesbarkeit – Text auf jedem Hintergrund, auf dem er platziert wird. Der Kontrast ist eine Zahl, keine Meinung: Der Barrierefreiheitsschwellenwert für Fließtext liegt bei 4,5:1, und ich optimiere meinen, indem ich die Palette so streiche, wie es my color theory writeup beschreibt.
Dunkler Text auf hellem Hintergrund, ein Akzent, fertig. Wenn es sich zu schlicht anfühlt, hilft die Fotografie und der Abstand, nicht ein vierter Farbton.
die Ausnahmen – wenn mehr Farben richtig sind
Die Regel wendet sich dort, wo der Inhalt die Farbe ist:
- Portfolio und Fotografie. Die Arbeit liefert die Palette; Die Website geht in neutrale Töne zurück, sodass die Bilder jede Stimmung erzeugen.
- Marken, die wirklich einen Regenbogen besitzen. eine Kindermarke, ein Festival, ein Künstlerbedarfsladen – dort sind die vielen Farben die Botschaft, und die Disziplin verschiebt sich woanders hin: Beschränken Sie den Regenbogen auf bestimmte Komponenten und halten Sie Typografie und Layout konsequent konsistent.
- Daten und Kategorien. Diagramme und Tags erhalten eine Farbe pro Bedeutung. Hier gilt die Regel der Konsistenz: Eine Farbe bedeutet überall auf der Website eine Sache oder sie bedeutet nichts.
Den Ausnahmen ist eines gemeinsam: Die Farben sind ein gewähltes System und kein akkumulierter Zufall. Das ist die eigentliche Trennlinie – nicht die Zählung.
FAQ: die Fragen, die ich tatsächlich bekomme
Sollte die Website genau zu meinem Logo passen?
die Farbe des Logos ja, die gesamte Website nein: Der genaue Farbton des Logos ist oft zu gesättigt, um 30 Prozent einer Seite darzustellen. Tönen Sie es für große Flächen dunkler oder weicher und behalten Sie für kleine Flecken die reine Version bei.
Was ist mit dem Dunkelmodus?
Es verdoppelt Ihre Oberflächenprüfung, nicht Ihre Farben: gleicher Akzent, angepasste Neutraltöne und die Kontrastprüfungen werden zweimal durchgeführt. Ich versende beides, und die Sweep-Methode im Beitrag zur Farbtheorie ist die Art und Weise, wie das dunkle Thema seine Zahlen verdient.
Kann ich einfach die Palette verwenden, mit der meine Vorlage geliefert wurde?
Sie können es, und Tausende von Websites tun es – und genau das ist das Problem. Das Umfärben des einen Akzents der Vorlage ist die Stunde mit dem größten Nutzen bei der Do-it-yourself-Anpassung.