Farbschemata sind Geometrie auf einem Kreis — und der Kreis stimmt nicht

Die vier Schemata sind vier Additionen

Jede benannte Farbharmonie ist eine Menge von Versätzen auf einen Farbtonwinkel. Komplementär ist Basis + 180. Die Triade ist Basis, Basis + 120, Basis + 240. Analog ist Basis − 30, Basis, Basis + 30, wobei manche Werkzeuge 20 oder 45 verwenden. Geteilt-komplementär ist Basis + 150 und Basis + 210, also die um je 30° auseinandergezogene Komplementärfarbe. Tetradisch, auch quadratisch genannt, ist Basis + 90, + 180 und + 270. Monochromatisch ändert gar keinen Farbton und variiert nur Sättigung und Helligkeit.

Rechnen wir ein Beispiel. Nimm ein mittleres Blau bei Farbton 210. Komplementär ergibt (210 + 180) mod 360 = 30, ein Orange. Die Triade ergibt 210, (210 + 120) mod 360 = 330 und (210 + 240) mod 360 = 90 — Blau, Rosa und Gelbgrün. Analog ergibt 180, 210, 240 — Cyan, Blau, Violettblau. Geteilt-komplementär ergibt (210 + 150) mod 360 = 0 und (210 + 210) mod 360 = 60 — Rot und Gelb. Tetradisch ergibt 210, 300, 30, 120. Mehr steckt im Algorithmus nicht; das Modulo ist die einzige Feinheit, und es existiert nur, weil der Kreis umläuft.

Weil die Versätze nur den Farbton berühren, werden Sättigung und Helligkeit unverändert übernommen. Genau das lässt das Ergebnis wie eine Familie wirken — und genau das verursacht den unten beschriebenen Fehlschlag, denn S und L konstant zu halten hält nichts konstant, was das menschliche Auge oder ein Barrierefreiheitsprüfer misst.

Es gibt zwei Kreise, und sie sind sich beim Blau uneins

Frag einen Maler, was Blau gegenüberliegt, und die Antwort lautet Orange. Frag einen Schemagenerator, und die Antwort lautet Gelb. Beide haben recht, denn sie drehen auf verschiedenen Kreisen. Der Malerkreis hat Rot, Gelb und Blau als Primärfarben — das RYB-Modell, von Itten systematisiert und seither an Kunsthochschulen gelehrt — und beschreibt die subtraktive Mischung von Pigmenten. Der Kreis des Generators ist die Farbtonachse von HSL, eine zylindrische Umparametrisierung des additiven RGB-Würfels, dessen Primärfarben Rot, Grün und Blau und dessen Sekundärfarben Cyan, Magenta und Gelb sind.

Die Zahlen machen den Bruch greifbar. Bildet man den RYB-Würfel mit der üblichen trilinearen Interpolation auf sRGB ab, landet das RYB-Primärblau nahe #2a5f99 und RYB-Orange bei #ff8000, und sie liegen in diesem Modell an gegenüberliegenden Ecken. Auf dem HSL-Kreis ist Blau der Farbton 240, und 240 + 180 = 60 rendert als #ffff00, reines Gelb. Kein Kreis lügt. RYB beschreibt, was beim Mischen von Farbe passiert; HSL beschreibt, was beim Mischen von Licht passiert. Es sind Modelle verschiedener physikalischer Vorgänge, und nichts zwingt ihre Gegensätze zur Deckung.

Das sollte man wissen, bevor man mit der Ausgabe eines Generators streitet. Sagt eine Designreferenz, die Komplementärfarbe deines Markenblaus sei ein warmes Orange, und das Werkzeug liefert ein Zitronengelb, hat sich niemand geirrt — du liest schlicht zwei Koordinatensysteme. Willst du die malerische Antwort, bieten manche Generatoren einen RYB-Modus; sonst drehe 30° bis 40° weniger als bis zur mathematischen Komplementärfarbe, und du landest im Orangebereich.

Gleiche HSL-Helligkeit ist nicht gleiches Licht

Hier die Demonstration. Rendere neun Farbtöne als exakt hsl(H 100% 50%) — identische Sättigung, identische nominale Helligkeit — und schicke jeden durch die WCAG-Berechnung der relativen Leuchtdichte: jeden Kanal durch 255 teilen, linearisieren und die Ergebnisse mit 0,2126 Rot, 0,7152 Grün, 0,0722 Blau gewichten. Farbton 60 ergibt #ffff00 mit einer relativen Leuchtdichte von 0,9278. Farbton 240 ergibt #0000ff mit 0,0722. Derselbe Helligkeitsregler, 12,85-mal so viel Licht.

Die Folgen sind im Kontrast sofort sichtbar. Auf weißem Grund erreicht dieses Gelb 1,07:1 — unsichtbar — während dieses Blau 8,59:1 erreicht und jede WCAG-Stufe übersteht. Gegeneinander erreicht das Paar 8,00:1, weshalb Gelb auf Blau eine klassische Beschilderungskombination und Gelb auf Weiß ein klassischer Fehler ist. Der vollständige Durchlauf ist lehrreich: Farbton 0 (#ff0000) hat die Leuchtdichte 0,2126, Farbton 120 (#00ff00) 0,7152 und Farbton 180 (#00ffff) 0,7874. Die Spanne auf einem einzigen Helligkeitsring deckt fast den ganzen Bereich von 0 bis 1 ab.

Der Grund liegt in den Gewichten. Die relative Leuchtdichte wird von Grün dominiert, das 71,52 % davon trägt, während Blau 7,22 % beisteuert. Die Helligkeit von HSL weiß davon nichts; sie ist als Mitte zwischen größtem und kleinstem RGB-Kanal definiert, eine rein geometrische Größe. Bei L = 50 % und S = 100 % ist jeder Farbton konstruktionsbedingt eine Farbe, deren Kanäle den ganzen Bereich von 0 bis 255 überspannen, und wie viel Licht das darstellt, hängt allein davon ab, welche Kanäle leuchten.

Was OKLCH und CIELAB unter Helligkeit verstehen

CIELAB, 1976 von der CIE veröffentlicht, war der erste breit übernommene Versuch eines wahrnehmungsgleichmäßigen Raums. Seine L*-Achse läuft von 0 bis 100 und beruht auf einer Kubikwurzelkompression der Leuchtdichte, gewählt, damit gleiche Zahlenschritte wie gleiche Schritte aussehen. Schick dasselbe Gelb und Blau hindurch: L* = 97,14 für #ffff00 und 32,30 für #0000ff. Immer noch sehr verschieden, doch der Unterschied ist nun ehrlich — das Gelb sieht wirklich viel heller aus — und das Verhältnis ist von 12,85 auf 3,01 gefallen.

OKLab, 2020 von Björn Ottosson veröffentlicht und heute als oklab() und oklch() Teil von CSS Color 4, verbessert CIELAB genau dort, wo CIELAB bekanntlich schwach ist: Farbtonkonstanz bei Blautönen und Vorhersagbarkeit bei Helligkeitsänderungen. Sein L läuft von 0 bis 1. Das Gelb liegt bei 0,968, das Blau bei 0,452. Seine Polarform OKLCH gibt dir Helligkeit, Chroma und Farbton — dieselben drei Begriffe, die HSL zu bieten vorgibt, nur bedeuten die ersten beiden hier, was sie sagen. Das zählt, weil eine bei fester OKLCH-Helligkeit erzeugte Palette wirklich wie eine Farbfamilie gleicher Helligkeit aussieht — genau das, was Designer von HSL zu verlangen glaubten.

Ein Vorbehalt gehört klar ausgesprochen. Wahrnehmungsbezogene Helligkeit ist immer noch nicht die relative Leuchtdichte, und weder das L von OKLCH noch das L* von CIELAB ist das, was ein WCAG-Prüfer berechnet. Zwei Farben mit identischer OKLCH-Helligkeit können verschiedene relative Leuchtdichten haben; Helligkeit wahrnehmungsbezogen anzugleichen gleicht also keine Kontrastverhältnisse an. Du bekommst eine Palette, die stimmig aussieht; du bekommst keine, die besteht.

Gleiche Drehungen sind keine gleichen Schritte

Das Helligkeitsproblem hat einen Zwilling auf der Farbtonachse. Eine Drehung um 30° im Grünbereich — von Farbton 90 zu 120 — führt zwischen zwei Grüntöne, die die meisten kaum benennen könnten. Eine Drehung um 30° im Blau-Magenta-Bereich — von 240 zu 270 — führt von reinem Blau zu einem deutlich anderen Violett. Die Winkel sind gleich; die empfundenen Abstände nicht, denn der Farbton von HSL leitet sich aus den Kanten des RGB-Würfels ab, und der Würfel ist keine Wahrnehmungskugel.

Sieh, was das mit einer Triade macht. Eine Drehung um 120° ab Farbton 0 ergibt #ff0000, #00ff00 und #0000ff mit relativen Leuchtdichten 0,2126, 0,7152 und 0,0722 und OKLCH-Helligkeiten 0,628, 0,866 und 0,452. Ein Mitglied ist wahrnehmungsbezogen fast doppelt so hell wie ein anderes und physikalisch zehnmal so hell. Dreh dieselbe Triade stattdessen ab Farbton 90, und du bekommst #80ff00, #0080ff und #ff0080 mit OKLCH-Helligkeiten 0,891, 0,615 und 0,645 — eine völlig andere Balance aus derselben Konstruktion, nur mit geändertem Startwinkel.

Deshalb wirkt eine Triade mal ausgewogen und mal wie eine Farbe, die über zwei andere hinwegschreit, ohne dass sich die Methode ändert. Die Methode ist dafür blind. Erzeugt man dasselbe Schema in OKLCH — Farbton drehen, L und C halten — verschwindet der Großteil der Varianz, denn die Helligkeit, die du hältst, ist nun die, die du siehst.

Die Geometrie weiß nichts vom Kontrast

Nimm ein echtes Markenblau, #2563eb. In HSL ist es hsl(221.2 83.2% 53.3%), und auf Weiß erreicht es 5,17:1 — bequem über der Schwelle von 4,5:1 für Fließtext auf WCAG AA. Erzeuge nun seine Familie auf die übliche Weise, indem du den Farbton bei fester Sättigung und Helligkeit drehst. Der Triadenpartner bei +120° ist #eb2563 und erreicht 4,22:1: durchgefallen. Geteilt-komplementär bei +150° ist #eb4a25, 3,79:1: durchgefallen. Die Komplementärfarbe bei +180° ist #ebad25, 1,99:1: durchgefallen. Bei +210° ist es #c6eb25, 1,37:1: durchgefallen. Bei +240°, #63eb25, 1,56:1: durchgefallen. Fünf Drehungen, fünf Fehlschläge, ausgehend von einer bestehenden Basis.

Nichts ist schiefgegangen. Der Generator hat genau das getan, was er verspricht: einen Farbton gedreht. Kontrast ist eine Eigenschaft eines Farbpaars, und einem Schemagenerator werden eine Farbe und ein Winkel gereicht. Er hat keinen Hintergrund zum Vergleichen und keine Möglichkeit zu wissen, welche seiner Ausgaben als Text und welche als dekorative Fläche endet. Von einer Drehung eine barrierefreie Palette zu erwarten heißt, die Antwort auf eine nie gestellte Frage zu erwarten.

Der gangbare Prozess hat zwei Schritte, nicht einen. Erzeuge die Geometrie, um zusammengehörige Farbtöne zu finden, und passe dann die Helligkeit farbweise an, bis jede das Verhältnis erreicht, das sie gegenüber ihrer Fläche braucht. Praktisch heißt das: Farbton und Chroma des Generators behalten und nur die Helligkeit bewegen — genau die Operation, die OKLCH vorhersagbar macht und HSL nicht. Textrollen brauchen 4,5:1, großer Text und Interface-Ränder 3:1, dekorative Flächen gar nichts. Die meisten Paletten enden daher mit zwei Helligkeitsvarianten je Farbton statt einer.

Häufige Fragen

Warum wirkt meine Triaden-Palette unausgewogen, obwohl die Mathematik symmetrisch ist?

Weil die Symmetrie in den Winkeln steckt, nicht im Erscheinungsbild. Eine Triade dreht zweimal um 120°, auf dem Farbtonkreis völlig gleichmäßig, doch dieser Kreis ist wahrnehmungsbezogen ungleichmäßig. Ab Farbton 0 bei hsl(H 100% 50%) ergibt das #ff0000, #00ff00 und #0000ff mit relativen Leuchtdichten 0,2126, 0,7152 und 0,0722 — das Grün gibt bei identischer HSL-Helligkeit zehnmal so viel Licht ab wie das Blau. In OKLCH lauten die Helligkeiten 0,628, 0,866 und 0,452, immer noch eine Spanne von fast zwei zu eins. Wer im Grün- oder Gelbbogen landet, dominiert, denn diese Farbtöne tragen in sRGB den Großteil der Leuchtdichte. Die Abhilfe ist nicht, die Triade aufzugeben, sondern nachträglich anzugleichen: die drei nach OKLCH wandeln, allen dasselbe L geben und neu rendern. Die Farbtöne bleiben, wo die Geometrie sie hingesetzt hat, und das visuelle Gewicht gleicht sich aus. Kann dein Werkzeug das nicht, bringt dich das Anpassen der HSL-Helligkeit nach Augenmaß je Farbe fast ans Ziel — nur eben nicht, indem du eine Zahl konstant hältst.

Ist die Komplementärfarbe von Blau Orange oder Gelb?

Beides, je nachdem, auf welchem Kreis du stehst. Auf dem RYB-Kreis der Künstler — Rot, Gelb und Blau als Primärfarben, das von Itten systematisierte und an Kunsthochschulen weiter gelehrte Modell — liegt Blau gegenüber Orange, denn Orange entsteht aus der Mischung der beiden anderen Primärfarben. Auf dem RGB-Kreis, den HSL freilegt, ist Blau der Farbton 240, sein Gegenüber der Farbton 60, und Farbton 60 bei voller Sättigung ist #ffff00, reines Gelb. Bildet man den RYB-Würfel auf sRGB ab, liegt RYB-Blau nahe #2a5f99 und RYB-Orange bei #ff8000, und das sind in diesem Modell tatsächlich gegenüberliegende Ecken. Keines ist falsch. RYB modelliert die subtraktive Pigmentmischung, in der Blau und Orange sich zu neutralem Braun aufheben; RGB modelliert die additive Lichtmischung, in der blaues und gelbes Licht sich zu Weiß summieren. Software rechnet mit Licht, also liefert ein Generator das Gelb. Willst du das malerische Ergebnis, nimm ein Werkzeug mit RYB-Modus oder drehe 30° bis 40° weniger als bis zur mathematischen Komplementärfarbe — von Farbton 240 landest du bei etwa Farbton 30, der als #ff8000 rendert, dem erwarteten Orange.

Sollte ich Paletten in OKLCH statt in HSL erzeugen?

Für alles, dessen Mitglieder als Gleichrangige wirken sollen: ja. Hält man die OKLCH-Helligkeit über eine Drehung konstant, bekommt man Farben, die tatsächlich gleich hell aussehen, während konstante HSL-Helligkeit die oben beschriebene 12,85-fache Leuchtdichtenspanne zwischen Gelb und Blau liefert. OKLCH wird in CSS als oklch() unterstützt und ist Teil der Spezifikation CSS Color 4, du kannst es also direkt schreiben statt zu konvertieren. Zwei praktische Vorbehalte. Erstens beschreibt OKLCH auch Farben außerhalb des sRGB-Gamuts: Ein Chroma, das bei einem Farbton funktioniert, kann bei einem anderen unerreichbar sein — Browser bilden auf den Gamut ab, doch das Ergebnis hat weniger Chroma als verlangt, und eine mit einem einzigen hohen C definierte Palette kommt nicht gleichmäßig gesättigt heraus. Halte C konservativ, etwa 0,10 bis 0,15, wenn jeder Farbton überleben soll. Zweitens ist die OKLCH-Helligkeit weiterhin nicht die relative WCAG-Leuchtdichte, gleiches L bedeutet also keinen gleichen Kontrast. Du musst jede Farbe gegen jeden Hintergrund prüfen, dem sie begegnet. OKLCH bringt dir, dass die Prüfung meist für alle Mitglieder gemeinsam besteht oder scheitert, statt einzeln aus Gründen, die niemand erklären kann.

Bedeutet eine größere Farbtondrehung immer mehr Kontrast?

Nein, und Gegenbeispiele sind leicht zu erzeugen. Kontrast nach WCAG hängt allein von der relativen Leuchtdichte ab, und Farbtondrehung ändert die Leuchtdichte auf eine Weise, die nichts damit zu tun hat, wie weit du gedreht hast. Von #2563eb aus schadet die Drehung um +120° dem Kontrast am wenigsten (4,22:1), die um +210° am meisten (1,37:1) — doch +180°, die größtmögliche Drehung, landet bei 1,99:1, dazwischen. Der Zusammenhang ist nicht monoton, weil die Leuchtdichtegewichte im Grün-Gelb-Bogen scharf gipfeln: Jede Drehung, die dich in die Region der Farbtöne 60 bis 120 trägt, hebt die Leuchtdichte und senkt auf weißem Grund den Kontrast, egal ob du über 90° oder 250° dorthin kamst. Das nützliche Denkbild: Farbtondrehung ist ein Gang über ein Gelände, dessen Höhe die Leuchtdichte ist, mit einem Berg bei Gelbgrün und einem Tal bei Blau. Die zurückgelegte Strecke sagt nichts über die erreichte Höhe. Sollen zwei Farben kontrastieren, spreize ihre Helligkeiten bewusst; Farbton allein zu drehen ist keine Kontraststrategie, sondern eine Farbtonstrategie.

Wie viele Farben braucht ein Schema wirklich?

Weniger Farbtöne und mehr Helligkeitsstufen, als die meisten Generatoren nahelegen. Eine funktionierende Interface-Palette besteht meist aus einem Markenfarbton, einer neutralen Rampe und höchstens einem Akzent, jeweils in mehreren Helligkeitsvarianten — ein heller Flächenton, eine mittlere Füllung und eine dunkle, texttaugliche Fassung. Letztere erklärt, warum die Zahl wächst: Wie oben gezeigt, kann ein Farbton bei einer Helligkeit nicht zugleich als flächiger Hintergrund und als lesbarer Text dienen, denn die eine Rolle braucht 4,5:1 gegen Weiß und die andere darf darauf kaum sichtbar sein. Aufgabe des Generators ist es, die Farbtonbeziehungen zu finden; deine Aufgabe ist es, jedem Farbton die zwei oder drei Helligkeitsstufen zu geben, die seine Rollen verlangen. Ein Vier-Farbton-Schema mit je einer Variante fällt irgendwo durch, ein Zwei-Farbton-Schema mit je fünf Varianten nicht. Wenn du zählst: eine neunstufige neutrale Rampe, fünf Stufen des Markenfarbtons und fünf des Akzents — und prüfe die für Text gedachten gegen jede Fläche, auf der sie erscheinen können.