Farbpalette erstellen: Balance mit der 60-30-10-Regel

Eine gute Farbpalette zu erstellen bedeutet nicht, zufällig hübsche Farben auszuwählen; es geht darum zu planen, in welchem Anteil jede Farbe auf der Seite erscheint und welche Rolle sie spielt. Genau deshalb wirken so viele Anfängerpaletten ermüdend: drei oder vier kräftige Farben konkurrieren mit gleichem Gewicht, und das Auge findet keinen Ruhepunkt. In diesem Leitfaden wenden wir Schritt für Schritt eine klassische Methode an, die von selbst Balance schafft — die 60-30-10-Regel — und sehen uns praktische Werkzeuge an, um deine Farben in einer echten Oberfläche zu testen.

Was ist die 60-30-10-Regel?

Die Regel stammt aus der Innenarchitektur und beschreibt die Farbverteilung einer Komposition in Prozent. Du teilst die Farben eines Bereichs etwa so auf:

60 % — dominante Farbe: Hintergründe, große leere Flächen, der Gesamtton der Seite. Meist eine neutrale oder gering gesättigte Farbe.
30 % — sekundäre Farbe: strukturelle Bereiche wie Karten, Abschnittshintergründe und Navigation. Sie kontrastiert mit der dominanten Farbe, kämpft aber nicht um Aufmerksamkeit.
10 % — Akzentfarbe: Buttons, Links, Handlungsaufforderungen. Die kräftigste und am seltensten verwendete Farbe; gerade diese Seltenheit zieht den Blick an.

Diese Verhältnisse müssen nicht auf den Pixel genau gemessen werden. Worauf es ankommt, ist die Hierarchie: eine Farbe führt, eine unterstützt, eine funkt. Solange du den Akzent sparsam einsetzt, wandert das Auge der Nutzer von selbst zu den wichtigen Elementen.

Schritt für Schritt eine Farbpalette erstellen

Beim Aufbau einer Palette von Grund auf kannst du dieser Reihenfolge folgen:

1. Beginne mit einer Basisfarbe. Am einfachsten ist es meist, mit der Markenfarbe oder dem Ton zu starten, den du als Akzent verwenden möchtest. Denke in HSL, etwa hsl(212, 90%, 50%).
2. Leite die Neutraltöne ab. Erzeuge für den 60-%-dominanten Bereich ein sehr gering gesättigtes Graublau aus demselben Farbton (z. B. Farbton 212, Sättigung 8 %). Leicht getönte Neutraltöne geben Wärme, die reines Grau vermissen lässt.
3. Wähle die sekundäre Farbe. Ein Farbton nahe der Basis (analog) oder direkt gegenüber (komplementär). Analoge Wahl wirkt ruhig, komplementäre energisch.
4. Vervielfache die Abstufungen. Erzeuge Hell-zu-Dunkel-Varianten für jede Hauptfarbe (etwa 50, 100, 200 … 900). In einer echten Oberfläche brauchst du diese Zwischentöne für Hover, Ränder und Schatten.
5. Prüfe den Kontrast. Teste Text-Hintergrund-Paare auf Barrierefreiheit (unten).

Nutze die richtigen Werkzeuge

Eine Palette allein nach Gefühl zu bauen ist ermüdend; kostenlose Tools erleichtern es erheblich:

Coolors und Adobe Color — erzeugen Harmonieschemata wie komplementär, analog und triadisch aus einem Farbkreis.
Figma — lässt dich deine Palette als Farbstile oder Variablen speichern und im gesamten Design konsistent wiederverwenden.
WebAIM Contrast Checker — misst das Kontrastverhältnis zweier Farben und zeigt die WCAG-AA/AAA-Konformität.
Browser-Entwicklertools — die Farbauswahl in den DevTools zeigt das Kontrastverhältnis sofort am echten Bildschirm.

Barrierefreier Kontrast ist Pflicht

Eine schöne Palette ist nutzlos, wenn sie nicht lesbar ist. Die WCAG-Standards verlangen ein Kontrastverhältnis von mindestens 4,5:1 für Text in normaler Größe und 3:1 für großen Text (etwa 24 px oder 18,66 px fett). Wenn du deine Akzentfarbe auf einem Button verwendest, prüfe immer den Kontrast zur darauf liegenden Beschriftung. Einen kontrastarmen Button nur deshalb zu nutzen, weil es die Markenfarbe ist, führt dazu, dass Nutzer die wichtige Aktion übersehen.

Eine praktische Gewohnheit: Teste die Palette im hellen und im dunklen Theme. Ein kräftiges Gelb, das auf Hell großartig aussieht, kann auf dunklem Hintergrund blenden; du musst den Akzentton pro Theme eventuell leicht anpassen.

Die Palette in CSS-Variablen überführen

Sobald die Palette feststeht, ist der sauberste Weg, sie in Code zu bringen, über CSS Custom Properties. Du definierst sie an einer Stelle und verwendest sie überall:

:root {
  /* 60 % dominant / neutral */
  --bg: hsl(212, 8%, 97%);
  --surface: hsl(212, 10%, 92%);
  /* 30 % sekundär */
  --secondary: hsl(212, 30%, 35%);
  /* 10 % Akzent */
  --accent: hsl(212, 90%, 50%);
  --accent-hover: hsl(212, 90%, 44%);
  --text: hsl(212, 15%, 15%);
}

.btn {
  background: var(--accent);
  color: white;
}
.btn:hover { background: var(--accent-hover); }

Statt einer separaten Hover-Variable kannst du sie auch mit einer Helligkeitsfunktion ableiten; in modernen Browsern macht color-mix() das einfach: background: color-mix(in srgb, var(--accent) 85%, black);

Häufige Fehler

Zu viele Akzentfarben. Mehr als zwei kräftige Farben führen meist zum Chaos; beschränke den Akzent auf einen einzigen Farbton.
Reines Schwarz und reines Weiß. #000 und #fff wirken hart; sehr dunkle und sehr helle Neutraltöne sind weicher.
Information allein über Farbe. Fehler/Erfolg nur durch Rot/Grün zu zeigen schließt farbenblinde Nutzer aus; untermauere es mit einem Symbol oder Text.

Häufige Fragen

Wie viele Farben sollte eine Palette haben?

In der Praxis genügen 3 Hauptfarben (dominant, sekundär, Akzent) plus einige Hell-zu-Dunkel-Varianten von jeder. Du kannst ein oder zwei Statusfarben hinzufügen (Erfolg, Warnung, Fehler). Die Zahl der Hauptfarbtöne auf drei zu begrenzen ist für die meisten Oberflächen der sicherste Ansatz.

Muss ich das Verhältnis 60-30-10 genau treffen?

Nein. Die Verhältnisse sind ein Hierarchie-Leitfaden, kein Ziel. Entscheidend ist, eine Farbe als dominant, eine als unterstützend und eine als seltenen Akzent zu positionieren. Die Prozente grob nach Augenmaß zu halten reicht.

Was ist der schnellste Einstieg in Farbharmonie?

Am schnellsten ist es, von einer einzigen Markenfarbe auszugehen und mit Coolors oder Adobe Color ein komplementäres oder analoges Schema zu erzeugen. Danach feinst du Neutraltöne und Kontrast von Hand ab.

Möchtest du eine ausgewogene, barrierefreie Farbpalette passend zu deiner Marke? Wenn du professionelle Unterstützung bei Logo, Oberfläche oder Markenidentität wünschst, nimm Kontakt mit mir auf.