Die 60-30-10-Regel ist eine Faustregel für die Aufteilung von Farben: 60 Prozent der Fläche in einer ruhigen Grundfarbe, 30 Prozent in einer Zweitfarbe, 10 Prozent in einem Akzent. So bekommt eine Seite Ruhe, Gegengewicht und einen klaren Blickfang. Die Nielsen Norman Group empfiehlt sie auch für Websites.
- 60-30-10-Regel
Eine Faustregel für die Farbaufteilung: 60 Prozent Grundfarbe, 30 Prozent Zweitfarbe, 10 Prozent Akzent.
Beispiel: „Nach der 60-30-10-Regel bekommt nur der wichtigste Button die Akzentfarbe.“Abgrenzung zum Color Scheme: Es legt fest, welche Farbe welche Rolle hat. Die 60-30-10-Regel sagt nur, wie viel Fläche jede bekommt.
Woher die 60-30-10-Regel kommt
Eine belegte Herkunft gibt es nicht. Wohnratgeber verorten die Regel in der Innenarchitektur und nennen sie alt, ohne Quelle. Verwandt ist der Quantitätskontrast unter den sieben Farbkontrasten nach Itten: Eine kleine Fläche wirkt auf einer großen ruhigen stärker als zwei gleich große.
Die 60-30-10-Regel im Webdesign
Die Nielsen Norman Group rät, die Akzentfarbe für den wichtigsten Call-to-Action aufzusparen. Die 60 Prozent übernehmen meist helle Flächen und Hintergründe, die 30 Prozent Kopfleiste, Spalten oder dunkle Abschnitte.
Wann die 60-30-10-Regel nicht passt
Bildstarke Seiten bringen ihre Farben über Fotos mit, Datenvisualisierungen brauchen mehr als einen Akzent. Die Prozente sind eine Richtschnur: Entscheidend ist, dass der Akzent selten bleibt und dadurch wirkt. Im Dark Mode tauschen die Rollen oft die Plätze: Dann übernehmen dunkle Flächen die 60 Prozent.