Farben lösen Emotionen aus. Je nach Farbe ganz unterschiedliche. Um so wichtiger ist es, stets den korrekten Farbton zu treffen. Dazu stehen uns Web-Entwicklern verschiedene Farbräume zur Verfügung. Der Klassiker ist RGB. Leider wird dieser gerne unterschiedlich interpretiert, was dazu führt, dass dieselbe Farbe abhängig von verwendeter Soft- und Hardware anders dargestellt wird. Mit dem neuen Standard-RGB (sRGB) sollte alles besser werden. Doch im Nachgang dieser Überarbeitung wurden noch einige weitere Farbräume zur Verfügung gestellt, von denen insbesondere OKLAB in der Web-Entwicklung wesentlich mehr Potential hat.
Vergleichen wir also den Platzhirsch RGB mit dem Herausforderer OKLAB. Welchen Mehrwert bietet OKLAB und wie wird es eingebunden?
Gekrümmte Räume
Vielleicht kennst du aus der Wissenschaft die Raum-Zeit-Krümmung. Dann bist du mit dem wesentlichen Konzept der Farbraumkrümmung schnell vertraut.
Der linerare Weg von A nach B (oder von Rot nach Grün) ist in der Regel nicht der optimalste. Der herkömmliche RGB-Farbraum ging ursprünglich jedoch genau davon aus. Die sogenannte Gamma-Krümmung kam erst später und wurde dann erst mit sRGB standardisiert. In einem linearen Farbverlauf gewinnen immer die kalten Farben. Das trifft bei RGB noch heute zu. Wenn du im untenstehenden Beispiel eine warme Farbe (beispielsweise #A51D2D) auswählst, wirst du erkennen, dass beim RGB-Verlauf nach Weiss die Farbe immer kälter wird. Beim OKLAB-Verlauf bleibt hingegen die Farbtemperatur erhalten.
Bei kalten Farben (beispielsweise #1A5FB4) ist der Unterschied hingegen eher gering. Bei reinen Grautönen ist der lineare Weg zumindest theoretisch korrekt. RGB und OKLAB unterscheiden sich kaum. Ohne Farbe gibt es keine Farbraumkrümmung.
Zusammengefasst dient also die Gamma-Krümmung dem Erhalt der Farbtemperatur. Mit sRGB wurde ein Kompromiss zwischen den verschiedenen gewachsenen RGB-Gamma-Krümmungen zum Standard erkoren, was sRGB kompatibel zu RGB macht. In der Web-Entwicklung verwendet rgb() daher den sRGB-Farbraum.
OKLAB wurde hingegen nach den neuesten Erkenntnissen zur Farbraumkrümmung und dem Aufnahmevermögen des menschlichen Auges neu und ohne Rücksicht auf Kompatibilitäten entwickelt. Dabei wurde auch berücksichtigt, dass sehr dunkle und sehr helle Farben optisch schlechter unterscheidbar sind. Der OKLAB-Farbraum flacht die Krümmung daher in Richtung Schwarz und Weiss ab.
Für neue Projekte ist OKLAB daher der richtige Weg. Bestehende Projekte bleiben wohl besser bei RGB. Allerdings unterstützen neue CSS-Funkionen wie color() und color-mix() kein RGB. Hier muss sRGB oder natürlich OKLAB verwendet werden. sRGB-Werte liegen zwischen 0 und 1, also ist der RGB-Wert durch 255 zu teilen.
Farben vergleichen
In diesem Beispiel kann der Farbraum und eine Grundfarbe ausgewählt werden, aus der dann weitere Abstufungen mit zwanzig Prozent mehr Weissanteil erstellt werden.
Selber machen
Falls du das obige Beispiel bei dir einbinden willst, kannst du den Quellcode gerne herunterladen.
