Farbräume erklärt für Designer

Der Begriff „Farbraum” umfasst zwei verschiedene Arten von Dingen, und die meiste Verwirrung rund um den Begriff entsteht dadurch, dass man sie verwechselt. Gamuts — sRGB, Display-P3, Rec.2020 — sind Mengen erzeugbarer Farben: das, was ein bestimmter Bildschirm physisch darstellen kann. Koordinatensysteme — HSL, LAB, OKLCH — sind Wege, Farben mit Zahlen zu adressieren, unabhängig von jedem Bildschirm. Im weiten Sinne ist ein Farbraum jedes organisierte System zur Darstellung von Farbe; die praktische Fähigkeit besteht darin, zu erkennen, auf welche der beiden Arten sich ein gegebener Name bezieht.

Dieser Artikel ist die Orientierungskarte: die beiden Arten, wie sie sich kombinieren und welche Paarung zu welcher Aufgabe passt. Er gehört zu unserem OKLCH-Leitfaden, der die Seite der Koordinatensysteme im Detail behandelt.

Was ist ein Gamut?

Ein Gamut ist die Menge der Farben, die ein Gerät oder ein Standard reproduzieren kann. Die drei Namen, die dir am häufigsten begegnen, bilden ineinander verschachtelte Ringe:

• sRGB — die Basis, Mitte der 1990er-Jahre standardisiert und immer noch die sichere Annahme fürs Web: praktisch jeder im Einsatz befindliche Bildschirm kann ihn vollständig darstellen.
• Display-P3 — rund 25 % größer, wobei sich die zusätzlichen Farben in gesättigten Mitteltönen konzentrieren: kräftige Rot-, Grün- und Türkistöne. Seit 2016 Standard auf iPhones und fast ebenso lange auf Macs; die meisten aktuellen Smartphones und viele Laptops werden mit P3-fähigen Panels ausgeliefert.
• Rec.2020 — die Broadcast-Spezifikation für Ultra-High-Definition-Video, noch weiter. Es ist eher ein Ziel als gegenwärtige Realität: heutige Endkundenbildschirme decken nur einen Teil davon ab.

Jeder Ring enthält den vorherigen, sodass eine Farbe, die in sRGB sicher ist, überall sicher ist, während die kräftigsten P3-Farben überhaupt kein sRGB-Äquivalent haben. Ein Gamut beantwortet genau eine Frage — kann diese Hardware diese Farbe erzeugen? — und sagt nichts darüber, wie du Farben benennen, vergleichen oder bearbeiten solltest. Das ist die Aufgabe der anderen Art.

Was ist ein Farbmodell?

Ein Farbmodell — ein Koordinatensystem — ist ein Schema, um Farben mit Zahlen zu adressieren:

• HSL ordnet RGB-Werte in einen Zylinder aus Farbton, Sättigung und Helligkeit um. Bequem zu lesen, aber seine „Helligkeit” ist ein geometrischer Bruchteil von RGB, keine Aussage über die Wahrnehmung.
• LAB (CIELAB) wurde für die perzeptive Messung gebaut und bleibt das Rückgrat von Druck- und Farbmanagement-Workflows.
• OKLCH (die zylindrische Form von OKLab) ist das moderne perzeptive Modell: Farben mit demselben L sehen tatsächlich gleich hell aus, weshalb neuere CSS-Farbfeatures und Werkzeuge sich darauf standardisiert haben.

Die entscheidende Eigenschaft ist das, was ein Modell nicht ist: Es ist nicht an ein Gamut gebunden. Ein Koordinatensystem kann alle sichtbaren Farben adressieren und noch mehr; ein Gamut ist eine Region innerhalb dieses Raums. Du kannst eine sRGB-Farbe in OKLCH beschreiben und eine reine P3-Farbe in OKLCH — mit denselben drei Zahlen, die dasselbe bedeuten. (HSL ist die Ausnahme, die die Regel bestätigt — es ist auf sRGB-Werten definiert, was einer der Gründe ist, warum es keine Wide-Gamut-Farben erreichen kann.)

Sollte ich P3 oder OKLCH verwenden?

Die Frage vergleicht Dinge aus verschiedenen Kategorien — so als würde man fragen, ob man mit dem Reisepass oder mit dem Flugzeug reisen soll. P3 ist ein Gamut; OKLCH ist ein Koordinatensystem. Du wählst nicht zwischen ihnen: Du wählst je eines von beiden, und jede Kombination ist stimmig.

Eine nützliche Analogie — und es ist nur eine Analogie — ist die gesprochene Sprache. Das Koordinatensystem ist die Sprache, in der du Farben beschreibst; das Gamut ist der Wortschatz, den ein bestimmter Bildschirm aussprechen kann. Ein sRGB-Bildschirm und ein P3-Bildschirm sprechen dasselbe OKLCH, der eine hat nur mehr Wörter zur Verfügung. „P3 oder OKLCH?” löst sich in zwei unabhängige Fragen mit klaren Antworten auf: In welcher Sprache sollte ich denken? (in einer perzeptiven, denn Design-Entscheidungen — „dieselbe Farbe, heller”, „über alle Farbtöne hinweg gleich kräftig” — sind perzeptive Entscheidungen, und du willst Wörter, die zu ihnen passen) und welchen Wortschatz sollte ich anpeilen? (sRGB als die Basis, die jeder darstellen kann, P3 als Erweiterung, wo Bildschirme es zulassen).

Wie sieht dieselbe Farbe in verschiedenen Notationen aus?

Nimm das Blau #2563eb. Jede Zeile dieser Tabelle benennt denselben Punkt im Farbraum:

Vier Notationen, eine Farbe. Erhöhe nun die Chroma von 0,215 auf 0,26 und halte Helligkeit und Farbton fest. Bei dieser Helligkeit und diesem Farbton liegt die sRGB-Obergrenze bei ≈0,251, also hat die neue Farbe sRGB verlassen — aber die P3-Obergrenze liegt hier bei ≈0,269, sie bleibt also auf einem P3-Bildschirm erzeugbar. Beobachte, wie die Notationen auseinanderlaufen:

• OKLCH benennt sie weiterhin exakt: oklch(0.546 0.26 262.9). Die Sprache kümmert es nicht, dass manche Bildschirme sie nicht aussprechen können.
• Die P3-Notation kann sie weiterhin erzeugen: ≈ color(display-p3 0.154 0.345 0.981).
• Hex hat keinen Code dafür. Der nächste sRGB-Wert, ≈ #0b59ff, ist eine nahe, aber andere Farbe — etwas dunkler und matter als das, was gefordert war.

Zwei Notationen folgen der Farbe über den Zaun hinaus; eine bleibt an ihm stehen. Diese eine Beobachtung ist die Unterscheidung zwischen Gamut und Modell in der Praxis.

Öffne dieses Blau im Scale Composer — dieselbe Ausgangsfarbe, erzeugt als vollständige Skala gegen die sRGB-Basis, mit den oklch()-Koordinaten und dem Hex-Wert jeder Stufe nebeneinander.

Welchen Farbraum sollte ich für welche Aufgabe verwenden?

Von jeder Art eines, pro Aufgabe gewählt:

Für Interface-Arbeit erzeuge und denke in OKLCH, liefere Werte, die sicher in sRGB dargestellt werden, und lege color(display-p3 …) obendrauf, wo es sich lohnt — meist Akzente und Markenfarbe. Bei Bildmaterial reist die Farbe innerhalb der Datei; die Aufgabe ist das korrekte Profil-Tagging, nicht die Notation. Im Druck ist Papier ein ganz anderes Gamut, und LAB dient seit Langem als die neutrale Sprache zwischen Bildschirm und Druckmaschine.

Beobachte, wie sich die beiden Arten unabhängig bewegen

Der sauberste Beweis dafür, dass Gamut und Modell getrennte Dinge sind, besteht darin, das eine zu ändern, während das andere stillsteht: schalte dieselbe Palette auf Display-P3 um. Das Koordinatensystem bewegt sich nicht — L, C und H bleiben die Anzeige — während der Wortschatz wächst: Mitteltonstufen nehmen Chroma an, für das sRGB keine Wörter hatte, jede Stufe trägt nun einen color(display-p3 …)-String, und die Hex-Spalte bleibt an den sRGB-Zaun geklemmt. Dieselbe Sprache, größerer Wortschatz — und an der Logik der Palette musste sich nichts ändern.