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:

• Farbe

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

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:

• Farbe
  • Farbangaben
    Farbnamen, currentColor, etc
  • Farbmodelle
    rgb(), HEX, hsl() und das neue oklch()
  • Farbkonzept
    vom Farbkreis über die Harmonielehre zur Farbpalette
  • Farben und Kontraste
    der Klassiker von Jan Eric Hellbusch mit vielen Beispielen!

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