Die Kurzfassung
- Die 60-30-10-Regel besagt: Ein ausgewogenes Design nutzt eine Hauptfarbe für etwa 60 % der Fläche, eine Zweitfarbe für etwa 30 % und eine Akzentfarbe für etwa 10 %.
- Die Regel stammt aus der Innenarchitektur, wo Wände, Möbel und Accessoires ganz von selbst in diese drei Rollen fallen.
- Auf Bildschirmen sind die 60 % meist der Hintergrund, die 30 % tragen Flächen, Formen oder Schrift, und die 10 % gehören dem einen Element, das auffallen oder angetippt werden soll.
- In einem Farbverlauf bestimmt die Regel, wie viel Raum jede Farbe einnimmt, weshalb der Akzent nur eine kleine Fläche füllen sollte und kein ganzes Band.
- Die Zahlen sind ein Ausgangspunkt: Neutraltöne können die 60 % stellen, und viele starke Designs liegen eher bei 70-25-5 oder 90-10.
Auf dieser Seite
Die 60-30-10-Regel ist eine einfache Richtlinie für Farbproportionen: Nutze eine Hauptfarbe für etwa 60 % eines Designs, eine Zweitfarbe für etwa 30 % und einen Akzent für die letzten 10 %. Sie kommt aus der Innenarchitektur, wo Wände, Möbel und Accessoires ganz von allein diese Rollen übernehmen. Sie funktioniert genauso gut bei Social-Media-Posts, Präsentationsfolien, Websites und Markenpaletten, weil nicht mehr jede Farbe um dieselbe Aufmerksamkeit kämpft.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Was jeder Anteil leistet
Die drei Anteile haben verschiedene Aufgaben. Die 60 % geben die Stimmung vor und sind meist ruhig: ein Hintergrund, ein Untergrund, eine Wand. Die 30 % sorgen für Struktur und Kontrast und tragen Flächen, Formen oder große Schrift. Auf die 10 % fällt der Blick zuerst, deshalb gehören sie auf das eine Wichtigste: einen Button, einen Preis, ein Datum, ein Logo.
| Anteil | Rolle | Typische Farbe | Wo sie hingehört |
|---|---|---|---|
| 60 % | Hauptfarbe | Ruhig: ein Neutralton, ein heller Ton oder ein tiefes Dunkel | Hintergründe, große Flächen, Seitengrund |
| 30 % | Zweitfarbe | Kontrastreich, aber nicht laut | Flächen, Karten, große Schrift, Bildbereiche |
| 10 % | Akzent | Die kräftigste Farbe, die du hast | Buttons, Preise, Schlüsselwörter, kleine Formen |
Die 60-30-10-Regel bei einem Social-Media-Post
Bei einem Post ist die Hauptfarbe der Hintergrund, die Zweitfarbe die Überschrift oder eine Form dahinter, und der Akzent ein kleines Detail wie ein Datum, ein Preis oder ein einzelnes unterstrichenes Wort. Der häufigste Fehler: Die ganze Überschrift bekommt den Akzent. Dann schreien 30 % des Posts, und nichts sticht heraus, weil alles herausstechen will.
Ruhige Fläche, Zweitfarbe für die Schrift und der Akzent aufgespart für die Datumszeile.
Dieselben Proportionen auf einer breiten Folie. Die Anteile halten, auch wenn sich das Format ändert.
Die Regel auf Folien und Websites anwenden
Lege bei Folien die 60 % einmal als Hintergrund jeder Folie fest und bleib dabei. Nutze die 30 % für Titel, Diagramme und Bildrahmen. Spare die 10 % für die eine Zahl oder das eine Wort pro Folie auf, das sich dein Publikum merken soll. Präsentationshintergründe geht tiefer auf Untergründe ein, die nicht mit dem Inhalt konkurrieren.
Auf einer Website sind Seitenhintergrund und große Abschnitte die 60 %, Navigation, Karten, Footer und Fließtext die 30 %, und die 10 % gehören Handlungsaufforderungen und Links. Hat dein wichtigster Button dieselbe Farbe wie deine Überschriften, bleibt der Seite kein Akzent mehr, der die Blicke lenkt.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }Schreib bei einer Marke die Anteile in deinen Markenstyleguide neben die Hex-Codes. Eine Farbpalette ohne Proportionen lädt jede Designerin und jeden Designer ein, die Lieblingsfarbe für den Hintergrund zu wählen, und nach einem Monat sieht die Marke aus wie drei Marken.
Die 60-30-10-Regel im Farbverlauf
Farbverläufe verschieben Proportionen leicht, denn eine gleichmäßige Mischung gibt jeder Farbe denselben Anteil. Wende die Regel an, indem du die Farbstopps verschiebst: Die Hauptfarbe hält den größten Teil der Fläche, geht über etwa ein Drittel in die Zweitfarbe über, und der Akzent kommt nur an einem Rand oder als kleines Leuchten dazu.
Wann du die Regel biegst oder brichst
Brich sie, wenn
- du mit einem Farbton arbeitest: Ein monochromes Farbschema folgt 60-30-10 eher in der Helligkeit als im Farbton
- das Design hauptsächlich aus Schrift auf einem Neutralton besteht, wo 90-10 sauberer ist
- ein Foto seine eigene Farbe mitbringt und deine Farbpalette es nur einrahmt
- die Markenfarbe dominieren muss, etwa bei einem Plakat ganz in Markenrot
Behalte sie, wenn
- Farben anfangen zu konkurrieren und nichts mehr heraussticht
- ein Team sich eine Farbpalette teilt und eine Regel zum Festhalten braucht
- du drei oder mehr kräftige Farben ausbalancieren musst
- Buttons und Schlüsselzahlen untergehen
Die Zahlen sind Näherungswerte. Weißraum zählt mit. Neutraltöne wie Off-White, Anthrazit und Sand können deine 60 % sein, und zwei echte Farben teilen sich den Rest. Entscheidend ist die Reihenfolge: ein klarer Anführer, eine Unterstützung, ein seltener Akzent. Für die Wahl der Farben selbst lies Markenfarben auswählen und Grundlagen der Farbtheorie.
Häufige Fragen
Was ist die 60-30-10-Regel?
Sie ist eine Richtlinie für Farbproportionen: etwa 60 % eines Designs in einer Hauptfarbe, 30 % in einer Zweitfarbe und 10 % in einer Akzentfarbe.
Woher stammt die 60-30-10-Regel?
Sie ist eine bewährte Faustregel der Innenarchitektur, in der Wände, Möbel und Accessoires ganz natürlich die drei Anteile übernehmen.
Zählt Weiß bei der 60-30-10-Regel mit?
Ja. Neutraltöne wie Weiß, Off-White, Sand oder Anthrazit bilden oft die dominanten 60 %, sodass die 30 % und 10 % echten Farben bleiben.
Welche Farbe sollte der 10-%-Akzent haben?
Meist deine kräftigste Farbe, eingesetzt für das eine Element, das zuerst auffallen soll, etwa einen Button, einen Preis oder ein Datum.
Wie nutze ich die 60-30-10-Regel in einem Farbverlauf?
Verschiebe die Farbstopps so, dass die Hauptfarbe den größten Teil der Fläche abdeckt, die Zweitfarbe über etwa ein Drittel überblendet und der Akzent nur in einem kleinen Bereich oder am Rand erscheint.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
