Die besten Farb-Funktionen in CSS?

Ich habe schon gesagt, dass HSL das beste Farbformat ist, das wir haben. Die meisten von uns sind nicht wie David DeSandro, der Hex-Codes lesen kann. HSL(a) steht für Hue, Saturation, Lightness und Alpha, falls wir es brauchen.

hsl(120, 100%, 40%)

Farbton ist nicht intuitiv, aber er ist nicht so seltsam. Man durchläuft das Farbrad von 0 bis 360. Sättigung ist offensichtlicher, wo 0% die gesamte Farbe entzogen ist, wie Graustufen, und 100% ist die volle, satte Farbe bei diesem Farbton. Helligkeit ist bei 50% "normal" und fügt Weiß oder Schwarz hinzu, wenn man sich 100% bzw. 0% nähert. Ich bin sicher, dass dies nicht die wissenschaftlich oder technisch korrekte Erklärung ist, aber das ist die Logik des Gehirns.

Es gibt immer noch Probleme bei der Verwendung von HSL, was Brian Kardell ausführlich erklärt. Ich bin weit davon entfernt, ein Farbexperte zu sein, aber ich glaube, ich verstehe, was Brian (und Adam) in diesem Artikel sagen. Sagen wir, Sie haben drei verschiedene Farben und alle haben in HSL die exakt gleiche Helligkeit. Das bedeutet nicht, dass sie alle tatsächlich die gleiche Helligkeit haben. Das ist irgendwie seltsam, besonders wenn Sie dieses Farbformat als Teil eines Farbsystems verwenden.

Die gute Nachricht ist, dass es Farbmerkmale gibt, die bereits als Modul in CSS Level 4 spezifiziert sind und dabei helfen: Lab und LCH. Schauen Sie sich das Beispiel von Adam an, bei dem die Farben in Lab Werte haben, die ihre tatsächliche Helligkeit viel genauer widerspiegeln, wie wir sie wahrnehmen.

HSL vs LAB:: Helligkeit 💡

Gleiche Farben aus unserer kniffligen Farb-Umfrage, aber diesmal habe ich LAB's Version der gleichen Farbe darüber gelegt. Beachten Sie, wie viel näher der Helligkeitswert von LAB an den Ergebnissen unserer Umfrage liegt!

🎨 Farbräume sind nicht alle gleich, Leute! https://#/AIEs0amdWY pic.twitter.com/xkEguq3KZG

— Adam Argyle (@argyleink) 3. Dezember 2019

Brian

Es gibt Farbräume wie Lab und LCH, die das gesamte Spektrum abdecken und Qualitäten wie perzeptuelle Gleichmäßigkeit aufweisen. Wenn wir also großartige Farb-Funktionen für die Verwendung in echten Designsystemen wünschen, sind sich alle einig, dass die Unterstützung zur Durchführung besagter Berechnungen in den Lab/LCH-Farbräumen das ideale ermöglichende Merkmal ist.

In dem Bug-Ticket für Chrome denkt Tab, dass diese fast trivial zu implementieren wären.

Beachten Sie, dass lab()/lch()/gray() alle frühzeitig in unsere bestehende Farbinfrastruktur konvertiert werden können; sie führen keine grundlegend neuen Konzepte ein, sie sind lediglich eine bessere Möglichkeit, Farben anzugeben, die enger damit verbunden ist, wie unsere Augen tatsächlich funktionieren, anstatt eng mit der Funktionsweise von RGB-Pixeln verbunden zu sein.

Die Konvertierungsfunktionen zur Umwandlung in RGB sind ein bisschen Code, aber es handelt sich nur um einige Exponentialfunktionen und etwas Matrixmultiplikation, und das ist in der Spezifikation gut dokumentiert.

Das sollte etwas für "GoodFirstBug" sein, denke ich.