Henning Fries 20. Juni 2023

UI und UX: Blau, blau, blau ist alles, was ich hab’

Ein farbenfroher Artikel für Webschaffende

Die Verwendung dunklerer Designs ist nicht nur gut für die Umwelt, sondern trägt auch dazu bei, die Akkulaufzeit zu verlängern. © Adobe: Pixel-Shot / stock.adobe.com / 421402622 — © Adobe: Pixel-Shot

UI und UX für Entwickler:innen ist ein weites Feld. Es ist ganz schön schwer, hier einen Startpunkt zu finden, der sich gerade mal "so" in einen Artikel fassen lässt. Daher habe ich mich entschlossen, noch einmal eine "bewährte" Technik ins Spotlight zu ziehen, die – wie ich finde – noch viel zu wenig Anwendung findet: das HSL-Farbschema. Der nachfolgende farbenfrohe Artikel gibt Euch einen Einblick in die vielen Vorteile, aber auch Nachteile, die wir im Zusammenhang mit HSL kennen müssen und wie wir sie gekonnt umschiffen können. Zu guter Letzt wagen wir noch einen Ausblick auf neue Farbtechniken im WWW oder zusammengefasst mit den Worten von Bob Ross: "In life you need colors."

"Blau, blau, blau sind alle meine Kleider. Blau, blau, blau ist alles, was ich hab’." Diese Zeilen kennen wir wohl alle aus dem bekannten Kinderlied "Grün, grün, grün sind alle meine Kleider". Eigentlich eine einfache Aussage. "Ich habe Blau!". Was kann man mit Blau schon falsch machen? Blau ist im wahrsten Sinne der Farblehre "cool" [1]. Blau ist aber gleichzeitig auch teuer im Sinne des Stromverbrauchs! Das lässt mich gleich zu Beginn meines Artikels schon eine Brücke zu meinem Lieblingsthema "nachhaltiges Webdesign" schlagen. Untersuchungen von Google beschäftigten sich mit der Thematik, wie sich verschiedene Farben auf den Stromverbrauch auswirken [2]. Ich hole mal etwas aus und entferne mich kurz von Blau: Schwarz und Weiß verhalten sich buchstäblich wie Schwarz und Weiß: Während Schwarz für OLED-Displays (Organic Light Emitting Diodes, organische Leuchtdioden) die effizienteste Farbe ist und am wenigsten Energie verbraucht (alles aus), verbraucht Weiß am meisten (alles an). Ok, das war zu erwarten, aber jetzt kommt’s: Blau verbraucht 25 Prozent mehr Energie als Grün oder Rot. Wer hätte das gedacht? Die drei werden doch immer in einem Atemzug genannt und haben sogar eine eigene Abkürzung, das allseits bekannte und beliebte RGB. Das dicke "B" – unser aller Lieblingsblau – ist ein Stromfresser!

Blau, das Vertrauen und Zuverlässigkeit suggeriert und von uns allen flächendeckend über die Websites vergossen wird, hat uns hintergangen und stellt sich als Digitaldiesel des Webdesigns dar. Also nix Ad(d)Blue, sondern eher SubtractBlue. Leider muss ich gestehen, dass ich zuvor auch schon einiges in Blau getaucht habe, aber meistens Dunkelblau (ich schreibe das, um mein Gewissen zu beruhigen).

Man soll es nicht meinen, aber Farben kosten Energie und Geld.

Aber Spaß beiseite. Die Verwendung dunklerer Designs mit weniger Blau in der Farbpalette ist nicht nur gut für die Umwelt, sondern trägt auch dazu bei, die Akkulaufzeit von tragbaren Geräten wie Handys, Tablets und Laptops zu verlängern. Auch Google gab in diesem Zusammenhang zu, dass es die Entwickler und Designer mit "Material Design" auf einen falschen Weg geführt hat, da man die Entwickler dazu ermutigte, helle Farben und viel Weiß zu verwenden. Man soll es nicht meinen, aber Farben kosten Energie und Geld. Ok, nochmal zurück zu unserem Blau, das wir jetzt schon aus einem etwas skeptischen Blickwinkel betrachten. Wenn ich Euch, liebe Code-Schaffenden, drei HEX-Farb-Codes gebe (kleiner Tipp, es sind Blautöne), könnt ihr mir direkt sagen, ob es Schattierungen ein und desselben Blautones sind? Z. B. #03369E, #507DD7, #9FB9ED. Die normale Reaktion an dieser Stelle ist "Keine Ahnung, interessiert mich auch nicht. Frag den/die Designer:in!". Was aber wenn "der/die Designer:in" nicht zur Hand ist, die Hütte brennt und die "Design-Entscheidung" uns Code-Schaffenden überlassen wird (und gleichzeitig erwartet wird, dass wir dieselben gestalterischen Fähigkeiten an den Tag legen können wie die Kreativschaffenden). In solchen Fällen kann es schon sehr zeitsparend sein, zu wissen, ob die Farben miteinander "verwandt" sind bzw. miteinander harmonieren, was mit einer Verwandtschaft oft einhergeht. Ok, wir sind alle mathematisch geschult. Wir greifen uns den HEX-Wert und konvertieren in RGB, das kann man sicher besser lesen.

RGB	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
HEX	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Der Hex-Farbcode ist ein sechsstelliger Symbol-Code, der aus drei Zwei-Symbol-Elementen besteht. Jedes der Zwei-Symbol-Elemente drückt einen Farbwert von 0 bis 255 aus. Wir müssen jetzt nur jedes Element in Dezimalwerte umwandeln. Obige Tabelle soll nur als Gedächtnisstütze fungieren, denn Ihr kennt das ja alle. Also rechnen wir mal #03369E schnell um.

0 ist 0. Einfach. Jetzt multiplizieren wir 0 mit 16. Das ergibt 0. Bei 3 läuft's ähnlich – 3 entspricht 3. Jetzt kommt der "magische" Teil: wir addieren den zweiten Wert zum ersten und landen bei 3. Wir sparen uns den Kram in der Mitte, der läuft ja analog, aber 9E schauen wir uns noch an. 9 in HEX ist 9 in RGB. 9 mit 16 multiplizieren. Das ergibt 144. Jetzt noch den Wert für E in RGB, nämlich 14, dazu addieren und wir landen bei 158. Inklusive der ausgelassenen Schritte in meinem Beispiel gelangen wir zu folgendem RGB-Wert: rgb(3,54,158). Klasse!

HEX = #03369E
R = 03₁₆ = 3₁₀
G = 36₁₆ = 54₁₀
B = 9E₁₆ = 158₁₀

bzw. RGB = (3, 54, 158)

Wir schnappen uns jetzt noch das zweite Blau und dann wissen wir doch schon bestimmt mehr… RGB(80,125,215). Hmmm, vielleicht brauchen wir doch noch den dritten Wert… RGB(159,185,237). Verwandt, nicht verwandt oder doch noch keine Ahnung? Um ehrlich zu sein, immer noch keine Ahnung. Kurze Zwischenfrage: Warum benutzen wir denn eigentlich in unserem Code Farbwerte, die sich uns nicht erschließen. Sonst sind wir doch so pedantisch und verwenden selbstbeschreibende Klassen- und Variablennamen, aber hier würden wir, ohne zu zögern, die Katze im Sack kaufen.

Ok, wir wissen noch genau so viel wie am Anfang: Blau, Blau, Blau und nach all der Rechnerei ist meine einfache Frage noch immer nicht beantwortet. Wir können jetzt pragmatisch zum Color-Picker greifen, aber auch dieses Ergebnis muss erst umständlich aus dem Regenbogenteppich herausinterpretiert werden.

So, ich spanne Euch nicht länger auf die Folter. Es gibt eine Lösung und zwar eine einfache, die gerade wenn Ihr als Webschaffende unterwegs seid, auch in jedem Browser funktioniert. Darf ich vorstellen? HSL – Hue/Saturation/Lightness oder der mit wenig Lernaufwand menschenlesbare Farbton-Code. HSL ist eine auf Farbtönen basierende Darstellung des sRGB-Farbraums in der Computergrafik. Das HSL-Modell gilt weithin als intuitiver als das RGB-Modell. Der Grund dafür ist, dass wir mit dem HSL-Modell einen Grundfarbton auswählen und anschließend, je nach Gusto oder Vorgabe, dessen Sättigung und Helligkeit gezielt anpassen können.

HSL ist wirklich cool, und jetzt kommt's: HSL ist seit fast einem Jahrzehnt die beste Option, um bequem und lesbar mit Farben im Web zu arbeiten. Ihr fragt euch sicherlich, warum ich über einen solch "alten" Krempel schreibe? Weil ihn irgendwie doch kaum jemand einsetzt. Diese Erfahrung, das wir Frontendschaffenden eigentlich mit dem HEX- bzw. dem RGB-Code ganz zufrieden sind, habe ich in vielen meiner Trainings und Workshops gemacht. Um so schöner ist es, zu sehen, wenn sich wie bei dem Film "The Wizard of Oz" die Entwicklerwelt auf einmal in Farbe taucht und wir die Farben nun endlich wirklich wahrnehmen.

In CSS nimmt die Funktion hsl() den HSL-Wert als Parameter entgegen. Der HSL-Wert wird als Liste der drei Werte für Farbton, Sättigung und Helligkeit in der "neuen" CSS-Farbsyntax verwendet. Um einen Alphakanal hinzuzufügen, verwenden wir einen Schrägstrich, um ihn zu kennzeichnen:

hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)

Der erste der drei Werte – Hue – stellt einen Winkel des Farbkreises dar. Wir können den Wert einfach als Zahl des Winkels (z. B. 180) angeben. Um wieder unser Blau heranzuziehen, das wir aus Nachhaltigkeitsgründen eigentlich gar nicht mehr verwenden wollen, würden wir dieses in der Farbkreisecke (ich mag das Wort) um 240 finden. Schauen wir nochmal auf unsere drei HEX-Werte:

#03369E: hsl(220, 96%, 32%)
#507DD7: hsl(220, 63%, 58%)
#9FB9ED: hsl(220, 68%, 78%)

Tada! Wir haben eine Antwort. Alle liegen auf demselben Winkel im Farbkreis und sind offensichtlich miteinander verwandt. Sie unterscheiden sich nur in Sättigung und Helligkeit – deswegen passen sie auch so gut zueinander!

Ich erspare uns hier die Umrechnungsmathematik, da diese ungleich komplizierter ist und wir ja ab jetzt auch einfach nur noch HSL-Werte einsetzen [3].

So, jetzt aber wieder zurück zum HSL-Farbkreis. Wenn wir uns die "Hauptwinkel" im Hue-Kreis anschauen, stellen wir fest, dass wir die darin vorkommenden Farben eigentlich ganz gut kennen: Rot, Grün, Blau und ihnen gegenüber auf dem Farbkreis Cyan, Magenta, Yellow. Ist ja spitze, das kann man sich also auch ganz gut merken. Für alle Freund:innen einer guten Eselsbrücke, möchte ich an dieser Stelle noch einen Satz aus einem Vortrag, den ich einmal im Rahmen einer Konferenz gehört habe, hinzufügen: "Young Guys Can Be Messy Rascals": Yellow (60°), Green (120°), Cyan (180°), Blue (240°), Magenta (300°) und Red (360°). Die Grundfarben sind im Winkel von 60° zueinander angeordnet.

Der zweite Wert unseres HSL-Codes wird als Prozentsatz ausgedrückt. Er steht für den Grad der Sättigung der Farbe. Beispielsweise ist 100% voll gesättigt (bunter und intensiver oder besser more vibrant), während 0 ein völlig ungesättigtes Grau ist. Ist die Sättigung 0%, ist der Farbton irrelevant – das Drehen unseres Farbkreises bei einer Sättigung von 0% verändert die Farbe überhaupt nicht. Wir bleiben grau! Auch einfach zu verstehen.

Abb. 2: HSL-Grau: Bei 0% Sättigung sind alle Farben grau. ©

Der dritte Wert wird ebenfalls in Prozent angegeben. Die Helligkeit oder Lightness misst, wie nah eine Farbe an Schwarz oder Weiß ist. 0% Helligkeit ist reines Schwarz, 100% Helligkeit ist reines Weiß, und 50% Helligkeit ist die reine Repräsentanz des ausgewählten Farbtons. Die Sache mit den 50% Helligkeit für die Grundfarbe ist etwas seltsam, aber mit meiner obigen Erklärung auch irgendwie gut verständlich.

Vielleicht ist ein(e) Leser:in schon über die Abkürzung HSB gestolpert. Diese sollte man nicht mit HSL verwechseln. Helligkeit in HSL ist nicht dasselbe wie Helligkeit in HSB. In HSB ist 0% Helligkeit immer Schwarz, aber 100% Helligkeit ist nur dann Weiß, wenn die Sättigung ebenfalls 0% beträgt. Wenn die Sättigung 100% beträgt, ist 100% Helligkeit in HSB dasselbe wie 100% Sättigung und 50% Helligkeit in HSL. HSB ist in den Designer-Tools weiterverbreitet als HSL, aber die Browser, in denen wir ja unsere Farbwerte verwenden wollen, verstehen nur HSL. Wenn wir also für das Web entwerfen, sollten wir auch zu HSL greifen. Alle Unklarheiten beseitigt?

Na, dann mal Butter bei die Fische und lasst uns die neuen HSL-Werte mal einsetzen.

background-color: hsl(220, 96%, 32%);
background-color: hsla(220, 96%, 32%, 1.0);

Na also, das liest sich doch schon wie ein Buch. Da weiß man doch gleich, woran man ist. Jetzt erinnern wir uns daran, dass irgendwer mal gesagt hat, für ein gutes UI-Design brauche es nicht mehr als 5 Farben. Das Internet ist voll von Farbpaletten-Generatoren. Also: Grundfarbe eingeworfen und schon bekommen wir ggf. nach etwas Tuning oder auch schon gleich eine passende Farbharmonie ausgeworfen. Wenn wir uns jetzt allerdings streng an unsere 5 Farben halten, wird das UI etwa wie in Abb. 3 aussehen…

Abb. 3: 5-Farben-Control: Stellt Euch das mal als ganzes UI vor. ©

Ui – im Sinne eines Ausrufs, nicht des User Interfaces – so war das nicht gewollt. Als einzelnes Control mag dieses Look-and-Feel ja noch irgendwie "OK" sein, aber ein ganzes UI mit fünf Farben wie hier ist schon "anstrengend". Erinnern wir uns zurück an den Kunstunterricht: Schwarz und Weiß sind keine Farben, Grau auch nicht. Schon haben wir drei Color-Swatches mehr. Aber auch das wird uns nicht helfen. Zum Designen einer Benutzerschnittstelle braucht es einiges an Farben/Schattierungen, auch wenn es vermeintlich nur Grau sein soll. Viele Designs unterscheiden zwischen Primärfarbe, z. B. unsere Marken- oder Brand-Farbe, den neutralen "Tönen", also Grau und den Akzentfarben. Von dieser Gruppe kann es gerne mal mehrere geben. Das kann man auch daran erkennen, dass Frameworks oftmals Akzentfarben für Erfolg (Success), Gefahr (Danger), Warnung (Warning), Information (Info) einsetzen. Ihr merkt, langsam füllt sich der Farbkasten. Die Grundfarben allein sind allerdings nicht ausreichend. Es braucht mehr und um die Konsistenz zu wahren, braucht es "geregelt" mehr…

Schaut man heutzutage in ein modernes Design-System oder auch in ein CSS-Framework hinein, so finden sich oftmals Farbreihen mit folgendem Benamungsschema:

Im Tailwind-CSS-Schema ist Farbe-950 die dunkelste und Farbe-50 die hellste Farbe innerhalb der Reihe. Mit unserem HSL-Schema bei der Hand können wir uns jetzt eine eigene Farbreihe für unsere Primärfarbe basteln.

Schon wieder lässt sich dieses Schema leicht verstehen und ist bei weitem aufschlussreicher als CSS-Klassennamen wie Firmen-Blau-1, Firmen-Blau-2 und Firmen-Blau-3. Solche Namen können auch schnell verhängnisvoll werden, wenn die Firma beschließt, da sie jetzt um den erhöhten Energiebedarf von Blau weiß, die CI-Farbe auf Orange zu ändern.

Nehmen wir ein kleines Beispiel: Ich schenke mir hier die Extreme (50/950) und verwende nur 100 und 900 als Unter- bzw. Obergrenzen. Wir starten bei 500 unserer Grundprimärfarbe. Danach definieren wir die Extreme 100 und 900, die hellste und die dunkelste Repräsentanz unseres Farbtons. Jetzt werden die Lücken aufgefüllt. Zuerst nehmen wir uns die Farbtöne 700 und 300 vor, die in der Mitte der Lücken liegen. Diese Farbtöne sollen sich wie ein perfekter Kompromiss zwischen den Farbtönen auf beiden Seiten anfühlen. Es bleiben noch vier weitere Lücken in unserer Reihe (800, 600, 400 und 200), die wir auf die gleiche Weise füllen können. Hat man ein Gespür dafür, kann das Aufbauen einer Farbreihe ganz leicht von der Hand gehen. Wenn nicht, gibt es dankenswerterweise Tools im Netz, die uns an der Stelle die Arbeit abnehmen. Beginnen wir mit Kanonen und Spatzen: ChatGPT.

.primary-100 {
  color: hsl(220, 96%, 10%);
}

.primary-200 {
  color: hsl(220, 96%, 20%);
}

.primary-300 {
  color: hsl(220, 96%, 30%);
}

.primary-400 {
  color: hsl(220, 96%, 40%);
}

.primary-500 {
  color: hsl(220, 96%, 50%);
}

.primary-600 {
  color: hsl(220, 96%, 60%);
}

.primary-700 {
  color: hsl(220, 96%, 70%);
}

.primary-800 {
  color: hsl(220, 96%, 80%);
}

.primary-900 {
  color: hsl(220, 96%, 90%);
}

Der passende ChatGPT-Prompt lautet: Hi, please imagin you are a creative frontend developer! Please create me a CSS-color-scheme in HSL for hsl(220,96%,32%) in the tailwind CSS color naming scheme from 100 to 900 and name the CSS class 'primary'. Please give me only the list.

Wer noch nicht gleich auf ChatGPT setzen will, der kann auch Old-School-Tools wie beispielsweise Tailwind Shades, Palette oder den Tailwind CSS Color Generator nehmen [4]. Diese nehmen, dem Tailwind-Schema folgend, noch zusätzlich eine 50er- und eine 950er-Klasse hinzu. Den gleichen Ablauf können wir jetzt noch für unsere Akzentfarben durchführen oder wir beleihen eines der gängigen CSS-Frameworks.

Mit diesem Grundstock können wir arbeiten. Jetzt brauchen wir noch Grau. Um es gleich möglichst kompliziert zu machen, verrate ich Euch schon jetzt, das Grau nicht immer auch ein echtes Grau sein muss. Wir unterscheiden neutrale, warme und kalte Grautöne. Bei dieser Benamung "warm" und "kalt" können wir uns wieder den Farbkreis vorstellen. Warme Farben oben, kalte Farben unten. Per Definition hat neutrales Grau in unserem HSL-Schema eine Sättigung von 0% – es enthält überhaupt keine Farbe, aber in der Praxis sind viele der Farben, die wir gemeinhin für grau halten, ziemlich stark gesättigt.

Wie in der Realwelt verbinden wir die Begriffe "warm" und "kalt" mit einer Temperatur. In unserem Fall mit der Farbtemperatur. Den Begriff kennen wir alle von LED-Lampen. Dort müssen wir uns zwischen "warmweißen" Leuchten, die ein gelbliches Licht abgeben, und "kaltweißen" Leuchten, die ein bläuliches Licht abgeben, entscheiden. Das funktioniert für die Farben im UI in ähnlicher Weise. Wollen wir ein kühles Grau, sättigen wir es mit einem Schuss Blau. Um Grautöne wärmer erscheinen zu lassen, können wir sie mit etwas Gelb oder Orange versehen (s. Abb. 6).

Als kleiner Tipp an dieser Stelle schadet es nichts, die Sättigung der helleren und dunkleren Farbtöne zu erhöhen, um eine einheitliche Farbtemperatur zu erreichen. Andernfalls wirken diese Farbtöne im Vergleich zu den Grautönen, die näher an 50% Helligkeit liegen, ein wenig ausgebleicht. Der Job ist allerdings Gefühlssache.

Bei neutralen bzw. "echten" Grautönen ist die Grundfarbe nicht so wichtig, aber ansonsten ist der Prozess zum Erstellen einer Schattierungsreihe identisch. Wir beginnen an den Rändern und füllen die Lücken auf, bis wir haben, was wir möchten. Das dunkelste Grau könnte z. B. die Farbe des dunkelsten Texts in unserem Design sein und das hellste Grau, ein Grauton, der sich subtil, aber dennoch erkennbar von einem weißen Hintergrund abhebt.

Lasst uns mal Inventur machen… Würden wir das 50–950-Schema wählen, so hätten wir jetzt 11 Schattierungen der Primärfarbe, 11 Grauschattierungen, 11 Schattierungen von 4 Akzentfarben, Schwarz und Weiß. So schnell hat man 68 Farben am Start (ja ich weiß, Grau, Schwarz und Weiß sind keine …). Aber das ist wirklich das Mindeste, was wir brauchen. Allerdings hat man jetzt schon ein wenig das Gefühl, die Kreativ-Büchse der Pandora geöffnet zu haben, dabei hatte ich doch nur mal nach 3 Blautönen gefragt.

"Mix up a little more shadow color here, then we can put us a little shadow right in there. See how you can move things around? You have unlimited power on this canvas – can literally, literally move mountains" (Bob Ross)

Farblich sind wir jetzt gut ausgestattet, allerdings kann es passieren, dass unsere Farbreihen ein paar Dellen haben, gerade wenn wir sie selbst erstellt haben. Mit Dellen meine ich Farben, die im Vergleich zu den anderen Farben der Reihe verwaschen und ausgebleicht aussehen bzw. die uns im Hinblick auf ihren Kontrast auch in Sachen Barrierefreiheit Probleme machen können (aber darüber könnte man ein eigenes Buch schreiben). Das liegt daran, dass die einzelnen Farben eine empfundene Helligkeit haben: Gelb wird als die hellste Farbe wahrgenommen, Blau als die dunkelste. Grün empfindet man fast dreimal so hell wie Blau oder zweimal so hell wie Rot.

Abb. 7: Wahrgenommene Helligkeiten (nach Eugene Fedorenko – @efedorenko).

Jetzt wird es richtig interessant, denn jetzt kommt das Zeug, das die Designer:innen schön für sich behalten: Wenn man die Helligkeit einer Farbe verändern will, verändert man normalerweise den Lightness-Wert. Bei manchen Farben geht das aber nur zu Lasten der Farbintensität. Da wir nun ja wissen, dass einige Farben als heller, andere als dunkler empfunden werden, können wir dieses Wissen nutzen, um unsere Farbreihe durch ein paar kleine Drehungen am Farbtonregler zu tunen: Um eine Farbe heller zu machen, drehen wir den Regler in Richtung des nächsthelleren Farbtons z. B. 60°, 180° oder 300°. Um eine Farbe auf die dunkle Seite zu verfrachten, drehen wir den Regler in Richtung des nächstliegenden dunkleren Farbtons: 0°, 120° oder 240°. Sollte Eure Primärfarbe Gelb sein, könnte Euch dieses Wissen jetzt schon einiges an Zeit einsparen, wenn Ihr Eure Farbschemata baut.

Wow, zu Beginn des Artikels konnten wir noch nicht mal drei HEX-Werte als verwandte Blautöne identifizieren und jetzt tunen wir schon Farbreihen. Wo soll das alles noch enden?

Für die Einführung in HSL, genau hier. Jetzt seid Ihr an der Reihe Euer Wissen mal in die Tat umzusetzen und nach dem Motto "stay foolish" einmal ein wenig damit herum zu spielen. Übrigens kann man mit CSS-Variablen und dem HSL-Schema ein paar coole Dinge zaubern, die auch Entwicklern richtig Spaß machen:

Beispiel für einen Hover-Farbwechsel mit CSS Custom Properties (aka CSS Variables): auch auf JSFiddle

:root {
  --primary-h: 220;
  --primary-s: 96%;
  --primary-l: 50%;
}

.btn {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.btn:hover {
  --primary-l: 55%;
}

Ich möchte in diesen Artikel noch ein wenig über den Farbtopftellerrand zu schauen. Vielleicht konnte ich ja ein paar Webschaffende für dieses Farbsystem begeistern und Euch zum Ausprobieren animieren. Jetzt folgt das "Aber" am HSL-Schema – die wahrgenommene Helligkeit! Die haben wir bereits beschrieben und auch gelernt, diese Problematik einigermaßen gut zu umschiffen. Dennoch will ich dieses Forum nutzen, um noch auf eine weitere Farbdarstellung in CSS zu schauen. CSS beinhaltet noch viel mehr "Farbsysteme": hwb(), lab(), lch(), oklab() und oklch()[5]. Ihr fragt Euch sicherlich – zu Recht –, warum ich das auch noch alles erwähne, hsl() ist doch cool und bequem?

Genau dieser Meinung bin ich auch, allerdings lohnt es sich an dieser Stelle auch einen kurzen Blick auf OKLCH (oder "Oklachroma") zu werfen – etwas Neues zu lernen, schadet doch nie, oder? Das Schöne an HSL ist, dass es viel intuitiver ist, als Hexadezimal- oder RGB-Farben, da sind wir uns jetzt ja hoffentlich alle einig. OKLCH folgt einem ähnlichen Schema. Das mentale Modell orientiert sich an HSL, nur die Reihenfolge der Werte ist umgekehrt:

Helligkeit: von 0% bis 100%.
Chroma: Lebendigkeit der Farbe, von 0.0 bis 0.37
Farbton: von 0 bis 360 Grad.

Abb. 8: Großartiges Tool: der OKLCH Color Picker & Converter. ©

Chroma

Chroma ist im Gegensatz zur Sättigung in HSL keine Prozentzahl. Der Chroma-Wert ist eine Zahl zwischen 0 und 0,37. Theoretisch kann OKLCH Farben mit Chroma bis unendlich angeben. Werte über der besagten 0,37-Grenze werden auf eine Farbe im unterstützten Bereich des Monitors gerundet und dieses Ergebnis kann unvorhersehbar sein – das sollten wir also lieber lassen. Ehrlich gesagt, liegt für die meisten Farbtöne die praktische Grenze sogar noch niedriger. Im Zusammenspiel mit den anderen Stellschrauben von OKLCH kann man den Chroma-Wert noch ein wenig nach oben tunen. Wenn wir eine sehr dunkle Farbe haben, können Monitore sie nur mit einer bestimmten Menge an Chroma anzeigen; es wird einfach nicht genug Licht ausgestrahlt, um die Farbe noch lebendiger zu machen. Auch unsere Augen nehmen die verschiedenen Wellenlängen nicht gleichermaßen wahr.

Farbton

Die Farbtonwerte stimmen nicht mit HSL überein. Alle Farbtöne wurden um etwa 30 Grad nach oben verschoben, wobei dieser Wert je nach Farbe ein wenig variiert [6]. Auch hier lassen sich die Unterschiede auf die menschliche Wahrnehmung zurückzuführen, so dass einige Farbtöne etwas mehr Raum im Spektrum erhalten. Außerdem sind diese Verschiebungen etwas anders, wenn man sie mit verschiedenen Helligkeits- und Sättigungsstufen vergleicht. Wie auch bei HSL kann der Farbton als Winkel (25deg) oder als Zahl (25) ausgedrückt werden. Einige wichtige Farbankerpunkte sind:

Rot: 30
Gelb: 90
Grün: 140
Cyan/Teal: 195
Blau: 260
Magenta: 330

Helligkeit

Ein deutlicher Unterschied zu HSL besteht darin, dass 0% oder 100% Helligkeit nicht automatisch völliges Schwarz oder völliges Weiß bedeuten. Wenn genügend Chroma vorhanden ist, kann man auch bei diesen Extremen noch etwas Farbe erhalten. Wenn wir ein "echtes" Schwarz, Weiß oder Grau möchten, muss der Chroma-Wert 0 sein. Die Helligkeit kann in Prozent (50%) oder als Dezimalzahl (0.5) angegeben werden.

Es gibt jedoch noch zwei weitere deutliche Unterschiede zu HSL. Wie wir bereits gelernt haben, gibt es bei HSL ein paar "Probleme" mit der menschlichen Wahrnehmung von Farben bzw. von Licht. Schauen wir uns einmal zwei in OLKCH definierte Farben an. Die Helligkeiten sind bei beiden unterschiedlich (55% und 73%, s. Abb. 9). Was passiert, wenn wir die Helligkeit von Grün an die von Blau anpassen?

Indem wir ihnen in OKLCH den gleichen Helligkeitswert geben, wird das Grün abgedunkelt. Nun erscheinen beide gleich hell. Wir sehen, dass der Chroma-Wert für die beiden Farben unterschiedlich ist (0.155 und 0.192). Wenn wir die Chroma-Werte aneinander anpassen, damit sie übereinstimmen, ist der Unterschied zwar nur subtil, aber das Grün auf der rechten Seite wurde im Vergleich zum vorherigen Beispiel entsättigt. Jetzt haben beide Farben die gleiche Helligkeit und Brillanz.

In OKLCH basieren die Werte nicht auf technischen Grenzen oder einer mathematischen Definition, sondern auf der wahrgenommenen Gleichheit. Der Helligkeitswert gibt genau an, wie hell die Farbe ist, und der Chroma-Wert gibt genau an, wie kräftig die Farbe ist. Das menschliche Auge empfindet einige Farben, wie z. B. Grün oder Gelb, als heller als andere, wie z. B. Blau oder Violett.

Wie bereits erwähnt ist HSL technisch auf den sRGB-Farbraum beschränkt, aber auch die Display-Technik steht nicht still und wird immer besser. Die meisten modernen Displays unterstützen einen breiteren Farbbereich – die sogenannte P3-Farbskala. Einige High-End-Monitore bieten sogar noch eine größere Farbpalette namens Rec2020 an (Anm.: Da ich noch nicht über ein solch edles Gerät verfüge, bekommt man im "OKLCH Color Picker & Converter" öfter mal den Spruch "Rec2020 is unavailable on this monitor").

Hier spielt OKLCH seine volle Stärke aus, da es jede Farbe angeben kann, die diese Monitore unterstützen – tatsächlich kann es jede Farbe angeben, die das menschliche Auge sehen kann. In CSS rundet der Browser alle Farben, die außerhalb des Bereichs liegen, automatisch auf die nächstliegende Farbe, die die Hardware darstellen kann und genau das bringt uns zur nächsten Frage: Wie ist die Browserunterstützung von oklch()?

Zurzeit wird OKLCH von Chrome, Edge und Safari unterstützt. Firefox unterstützt es im Moment nur hinter einem Flag, aber es wird erwartet, dass es bald mit Version 113 standardmäßig aktiviert wird. Die neueste Browserunterstützung können wir auf caniuse.com abfragen (zurzeit 81.36%) [7]. Wir sollten also noch ein wenig mit dem produktiven Einsatz warten.

Auch oklch() verwendet den "neuen" Stil der CSS-Farbsyntax, also keine Kommas zwischen den Werten: oklch(67% 0.25 356). Auch der Alphakanal für Transparenz wird über einen Schrägstrich angehängt. Wie auch bereits bei hsl() beschrieben, wurden auch die älteren Farbfunktionen alle aktualisiert und verwenden nun ebenfalls diesen Ansatz. Eine kleine Anmerkung des Autors: Für hsl() und rgb() wird aus Gründen der Rückwärtskompatibilität die alte Notation mit Kommas unterstützt, die neuen Farbfunktionen unterstützen die Kommaschreibweise jedoch nicht mehr. Wer etwas intensiver mit OKLCH spielen möchte, sollte sich unbedingt einmal den OKLCH Color Picker & Converter anschauen. Ein tolles Tool! Über die Funktionsweise und die Einsatzgebiete von OKLCH gibt es viele tolle Artikel [6;8].

So jetzt wisst Ihr Bescheid und es gibt noch mehr als HEX und RGB. Fangt doch mal mit HSL an, aber behaltet auch die OKLCH-Entwicklung im Auge. Bringen wir doch einfach ein bisschen mehr Farbe in unseren Entwicklungsalltag oder mit den Worten von Peter Fox: ...und während ich in die Tasten hau, wird langsam schwarz zu blau.

Quellen