Weblog

OKLCH: greller, bunter und so weiter?

Matthias Scharwies E-Mail-Adresse des Autors (Versionen)

Auf unserer MV im November fielen uns unerklärliche Werte in unserer Farbpalette auf. Die Recherche dazu führte zu einer umfassenden Neubearbeitung unserer Wikiseiten zu Farbangaben und Farbpaletten:

Unsere Farbpalette bestand aus vier Grundtönen und entsprechenden Pastellfarben:

blau hsl(201 50% 40% /0.1)
gelb hsl(44 75% 50% /0.1)
rot hsl(13 96% 40% /0.1)
grün hsl(80 45% 50% /0.2)

Erste Reaktion unserer Mitglieder: „Wo sind die Kommas?“

Schon seit längerem wurde die Schreibweise der Farbfunktionen so angepasst, dass Parameter innerhalb von CSS-Funktionen mit Leerzeichen getrennt werden. Ein optionaler Alphawert wird - wie oben gezeigt - nach einem Slash notiert. Auch unser SELF-Wiki verwendet bereits seit Februar 2022 nur noch die neue, einfachere Schreibweise!

Zweite Reaktion: „Warum ist der Alphawert bei Hellgrün anders?“

Ich hatte versucht, aus bestehenden HEX-Werten durch die Umrechnung in hsl() eine Systematik zu finden. Allerdings gibt es bei HSL, der Mischung aus Farbton (Hue); Sättigung und Helligkeit (Lightness) das Problem, dass die mit hsl() beschriebenen Werte nicht mit der wahrgenommenen Helligkeit übereinstimmen.

neue Farbräume

Eigentlich jedem klar, aber dann doch wieder erwischt: Es gibt eben nicht die drei Grund- und x Sekundärfarben, die Farbnamen und die 16,7 Farben des RGB-Farbraums. In der Natur gibt viel mehr Farbtöne, auch das menschliche Auge kann mehr als den RGB-Farbraum erfassen. Die 8-Bit des RGB-Farbraums sind nur eine Festlegung.

Um Farben besser darstellen zu können, gibt es nun die Möglichkeit weitere Farbräume in CSS zu nutzen.

Unter den vielfältigen Möglichkeiten sticht besonders die oklch()-Funktion hervor, die im OKLAB-Farbraum Farben durch ihre Bestandteile …

  • Lightness (Helligkeit)
  • Chroma (relative Buntwirkung)
  • Hue (Farbton)

definiert.

Anmerkung: Bei der Überarbeitung der Wikiseiten standen wir vor dem Problem, dass unsere Desktop-Monitore das volle Spektrum der Farben noch nicht ausnutzen und wir zum Testen immer wieder unsere fortschrittlicheren Mobilgeräte nutzen mussten. Auch wird die mächtige relative Syntax noch nicht im Firefox unterstützt. Trotzdem ist es eine interessante Entwicklung mit neuen Möglichkeiten!

Entdecke die Welt der Farben:

PS: Im Zuge der Überarbeitung haben wir auch unsere Beispielvorlage um eine Direktansicht ergänzt. Vielen Dank an @Rolf B

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen