1 Kommentar

OKLCH: greller, bunter und so weiter?

oklch-Farbpalette

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

eingeordnet unter:

veröffentlicht von Matthias Scharwies

Antwort verfassen Antwort mit Zitat verfassen

  1. OKLCH: greller, bunter und so weiter?

    nix
    – Informationen zu den Bewertungsregeln

    In der Natur gibt viel mehr Farbtöne, …

    Und wenn „die Leute“ dann, irgendwann, vielleicht auch noch drauf kommen, daß ihnen da sowieso nur ein Gemisch aus (typisch) 3 Farben vorgesetzt wird, das (immerhin recht gut) geeignet ist, unsere Augen über die diesbezügliche Wirklichkeit zu täuschen …
    Beispiel? Nehmen wir mal an, die drei Elemente würden wie ideale Laser-Quellen funktionieren und nur eine sehr eng begrenzte Wellenlänge emitieren. Sagen wir mal, nur Rot und Blau. Immer gemeinsam und voll ausgesteuert. Das Ergebnis unterziehen wir „einem Newton“. Lassen einen schmalen Lichtbalken daraus durch ein Prisma laufen — seltsam, daß da kein so schön aufgefächertes Spektrum erscheint?
    Immerhin: so eine RGB-Simulation (und andere sind davon bestenfalls nur anders, sicher aber nicht nicht betroffen) ist ja beispielsweise auch Grundlage für „das gute alte PovRay“. Und bei dem bin ich damals darüber gestolpert. Darüber, daß etwas wie die Darstellung des entsprechenden Newton-Experiments damit auch nur mit Tricks, aber eben nicht exakt, dargestellt werden kann. — Fangen wir jetzt noch mit der Zusammensetzung dieses „natürlichen Lichts“, mit den diversen Spektrallinien der dazu gehörenden „natürlichen Lichtquellen“ an? Nein, ich glaub’, das lassen wir besser gleich.
    Ja, für viele, die meisten Fälle genügt uns dieses Verhalten. Aber diese Wirklichkeit, die ist weitaus umfangreicher als das, was wir wahrnehmen. Wahrnehmen? Wahrzunehmen glauben!

    Antwort verfassen Antwort mit Zitat verfassen
    –
    Informationen zu den Bewertungsregeln