Farbharmonien: komplementär, analog, triadisch und mehr

Was eine Farbharmonie ist

Eine Harmonie ist eine Regel, nach der man Farben wählt, die zusammenpassen. Man nimmt eine Grundfarbe, behält ihre Helligkeit und Buntheit bei und dreht nur den Farbton um festgelegte Winkel auf dem Farbkreis.

Die Winkel sind der einfache Teil. Genauso wichtig ist, welchen Farbkreis man dreht, denn der klassische HSL-Kreis und ein wahrnehmungsbasierter Kreis wie OKLCH liefern beim gleichen Winkel sichtbar unterschiedliche Ergebnisse. Alle Beispiele unten starten bei #2a7fbf, einem mittleren Blau.

Komplementär, split-komplementär, analog, triadisch, tetradisch, quadratisch

Jede Zeile behält die OKLCH-Helligkeit der Grundfarbe, 0,577, und ihr Chroma, 0,127. Nur der Farbton dreht sich um die angegebenen Winkel. Fällt eine gedrehte Farbe aus sRGB heraus, wird das Chroma leicht gesenkt, deshalb sind einige Farben etwas weniger kräftig. Monochrom ist die Ausnahme: Der Farbton bleibt gleich, die Helligkeit ändert sich in Schritten von 0,12.

• Komplementär: die stärkste Spannung. Die zweite Farbe nur für kleine Akzente einsetzen, etwa für einen Call-to-Action-Button.
• Split-komplementär: dieselbe Energie wie komplementär, aber leichter auszubalancieren, weil der Akzent auf zwei Nachbarn des Gegentons verteilt ist.
• Analog: ruhig und stimmig. Gut für Illustrationen und Hintergründe, schwach, wenn ein Element hervorstechen soll.
• Triadisch, tetradisch und quadratisch: lebendig und schwer zu bändigen. Eine Farbe führen lassen, die anderen klein halten.
• Monochrom: ein Farbton in mehreren Helligkeitsstufen. Die sicherste Wahl für Interfaces, denn Kontrast entsteht ohnehin über die Helligkeit.

Warum der HSL-Farbkreis unausgewogene Harmonien liefert

Die meisten Farbkreise in Design-Tools arbeiten mit HSL: Sie drehen den Farbton und behalten die HSL-Werte für Sättigung und Helligkeit bei. HSL-Helligkeit ist aber eine Formel, nicht das, was man sieht. Dreht man ein goldenes Gelb in HSL um 180°, entsteht ein tiefes Blau, das deutlich dunkler wirkt als das Gelb.

Eine Drehung in OKLCH hält die wahrgenommene Helligkeit gleich. Hier ist #f4b400 auf beide Arten gedreht, jeweils mit der OKLCH-Helligkeit des Ergebnisses.

Die HSL-Reihe reicht in der Helligkeit von 0,489 bis 0,857: Blau und Lila sacken ab, das Mintgrün leuchtet. Die OKLCH-Reihe bleibt zwischen 0,802 und 0,817. Dasselbe gilt für reine RGB-Grundfarben: #ff0000, #00ff00 und #0000ff bilden eine perfekte HSL-Triade, ihre OKLCH-Helligkeit liegt aber bei 0,628, 0,866 und 0,452.

Das hat seinen Preis. Ein Blau, das so hell ist wie dieses Gelb, kann auf einem sRGB-Bildschirm nicht sehr kräftig sein, deshalb hat die OKLCH-Komplementärfarbe #97c0ff ein Chroma von 0,10 statt 0,166. Man wählt zwischen gleicher Helligkeit und gleicher Leuchtkraft; bei Gelb und Blau ist beides zugleich nicht möglich.

RYB-Farbkreis aus dem Kunstunterricht vs. RGB-Farbkreis am Bildschirm

Der Farbkreis aus dem Kunstunterricht ist RYB: Rot, Gelb und Blau als Grundfarben, wie beim Mischen von Farbe. Dort ist die Komplementärfarbe von Rot Grün und die von Blau Orange. Bildschirme mischen Licht, deshalb nutzen digitale Tools einen RGB-Farbkreis, auf dem Rot gegenüber Cyan liegt und Blau gegenüber Gelb.

Falsch ist keiner der beiden, sie beantworten verschiedene Fragen. RYB folgt der Maltradition, RGB und OKLCH folgen der Funktionsweise von Bildschirmen und Augen. Zeigt ein Design-Tool Cyan, wo man Grün erwartet hat, verwendet es den RGB-Kreis.

Die OKLCH-Spalte zeigt, was gleiche Helligkeit mit extremen Farben macht. Die Komplementärfarbe von reinem Blau wird ein dunkles Ocker mit derselben Helligkeit von 0,45, die von reinem Gelb ein fast weißes Lavendel bei 0,96.

Die 60-30-10-Regel angewandt auf eine Harmonie

Eine Harmonie sagt, welche Farben man nimmt, aber nicht, wie viel von jeder. Die 60-30-10-Regel schließt diese Lücke: Etwa 60 % der Fläche bekommt eine dominante Farbe, 30 % eine Sekundärfarbe und 10 % ein Akzent. Gleiche Anteile lassen selbst eine gute Harmonie unruhig wirken.

In einem Interface sind die 60 % meist ein fast neutraler Ton mit einem Hauch des Grundfarbtons, die 30 % die Grundfarbe und die 10 % der komplementäre Akzent. Hier ein Set aus #2a7fbf zum direkten Kopieren.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

So prüfst du den Kontrast einer Harmonie

Nicht der Farbtonunterschied macht Text lesbar, sondern der Helligkeitsunterschied. Das Komplementärpaar oben liegt im Farbton so weit auseinander wie nur möglich, trotzdem hat #2a7fbf auf #ab6708 ein WCAG-Kontrastverhältnis von 1,05:1 und ein APCA Lc von 0: Als Text praktisch unsichtbar.

Gleiche Helligkeit hat auch einen Vorteil. Weißer Text auf jeder Farbe der OKLCH-Harmonien oben liegt zwischen 4,04:1 und 4,62:1. Bei der HSL-Version derselben Harmonien schwankt er von 2,15:1 bis 8,90:1. Für das ganze OKLCH-Set genügt deshalb eine einzige Korrektur: Helligkeit auf 0,52 senken, und weißer Text erreicht auf jedem Farbton mit Chroma 0,127 mehr als 4,5:1, nämlich 5,00:1 bis 5,91:1.

Um zwei Harmoniefarben als Text und Hintergrund zu kombinieren, müssen sie in der Helligkeit auseinander: Farbtöne behalten, eine Farbe Richtung 0,35 schieben, die andere Richtung 0,93. Dann das echte Paar im Kontrastprüfer testen und die Palette durch einen Farbenblindheits-Simulator schicken, wenn der Akzent eine Bedeutung trägt.

Fragen und Antworten