👈🏿 🐩 🏄 CSS LCH Farben 🙌🏻 👎🏾 🛳️

Ich habe mich schon immer für die Wissenschaft der Farbe interessiert. 2014 sprach ich auf verschiedenen Konferenzen über die CSS Color 4-Spezifikation. Davor schrieb ich 2009 ein Programm zur Auswahl von Farben. Sie verwendete ein verstecktes Java-Applet, um ICC-Farbprofile zu unterstützen und ordnungsgemäß mit CMYK zu arbeiten. Soweit ich weiß, war es das erste Programm dieser Art. Ich habe es nie veröffentlicht, aber es führte zur Veröffentlichung dieser Veröffentlichung. Das Interesse an Farbe brachte mich zu dem Mann, der mein Ehemann wurde. 2019 wurde ich Mitherausgeber der CSS Color 5- Spezifikation . Mein Ziel ist es, meinen Vorschlag zu konkretisieren .

Farbmodifikation, mit der Designer Farbkanäle beliebig anpassen können, um Farboptionen zu erstellen. Ich möchte auch mein Angebot mit diesem Angebot kombinieren . CSS LCH-Farben faszinieren mich wirklich. Ich bin zutiefst davon überzeugt, dass Designer, wenn sie mehr über LCH-Farben erfahren, empört sein werden, dass sie immer noch nicht die Möglichkeit haben, solche Farben zu verwenden.

Was ist LCH?

Das CSS Color 4-Modul enthält unter anderem eine Definition von LCH-Farben . Heute haben alle gängigen Browser entweder begonnen, ihre Unterstützung zu implementieren, oder erwägen ernsthaft diese Möglichkeit:

In der Safari- Unterstützung wird LCH bereits implementiert.
Diese Funktion wird in Chrome erwartet .
Die Möglichkeit, diese Funktion in Firefox zu implementieren, wird erläutert .

LCH ist ein Farbraum, der einige Vorteile gegenüber den RGB / HSL-Farbräumen hat, die jeder mit CSS gewohnt ist. Ich würde sogar noch weiter gehen und LCH als eine Technologie bezeichnen, die die Funktionsweise von Farben im Web dramatisch verändern kann. Hier sind drei Fakten, die es mir ermöglichen, solche Aussagen zu machen.

▍1. LCH bietet im Vergleich zu sRGB Zugriff auf etwa 50% mehr Farben

Dies ist ein großer Schritt nach vorne. Derzeit wird jede CSS-Farbe, die wir einstellen können, im sRGB- Farbraum definiert . Vor einigen Jahren war dies mehr als genug, da alle Monitore außer den professionellen einen Farbumfang von weniger als sRGB hatten. Jetzt ist jedoch nicht mehr alles so. Heutzutage liegt der Farbumfang (dh der Farbbereich, der angezeigt werden kann) der meisten Monitore nahe bei P3 . Und das Volumen dieses Farbraums ist 50% größerals die Menge an Speicherplatz sRGB. CSS hat derzeit absolut keinen Zugriff auf diese Farben. Lassen Sie mich das wiederholen: Wir haben keinen Zugriff auf ein Drittel der Farben, die moderne Monitore anzeigen können. Und es geht nicht um kleinere Farben. Wir sprechen über die lebendigsten Farben, die Monitore anzeigen können. Unsere Websites sehen blass aus, da sich die Monitorhardware schneller entwickelt als CSS-Spezifikationen und Browser-Implementierungen.

Farbraum sRGB und P3

▍2. LCH (und Lab) sind Farbräume, deren Wahrnehmung einheitlich ist

Bei der Arbeit mit LCH ergibt dieselbe numerische Änderung im Farbraum den gleichen wahrgenommenen Unterschied zwischen den Farben. Diese Eigenschaft des Farbraums wird als „Wahrnehmungsgleichmäßigkeit“ bezeichnet. RGB- oder HSL-Farbräume sind in der Wahrnehmung nicht einheitlich. Hier ist ein sehr aufschlussreiches Beispiel für diese Funktion ( hier ist die Quelle dieses Beispiels).

Heterogenität der Wahrnehmung von HSL-Farben. Die

Farben in der oberen und unteren Reihe unterscheiden sich im Ton um 20 Grad. Denken Sie, dass der wahrgenommene Unterschied zwischen diesen Farben der gleiche ist?

▍3. Die Helligkeit in LCH ist ein Indikator, der etwas bedeutet

Im HSL-Farbraum ist Helligkeit ein bedeutungsloser Indikator. Farben können die gleiche Helligkeit haben, variieren jedoch stark in ihrer wahrgenommenen Helligkeit. Mein Lieblingsbeispiel ist ein Vergleich von Gelb und Blau. Sie mögen mir nicht glauben, aber die unten gezeigten Farben haben die gleiche HSL-Helligkeit.

HSL-Farben mit der gleichen Helligkeit

Beide Farben haben eine Helligkeit von 50%, aber sie haben sicherlich überhaupt nicht die gleiche wahrgenommene Helligkeit. Was bedeutet das Konzept der "Leichtigkeit" in HSL?

Hier können Sie mit mir argumentieren, dass zumindest Helligkeit bei gleichem Farbton (Farbton) und gleicher Farbsättigung Sinn macht. Das heißt - beim Ändern der Helligkeit innerhalb derselben Farbe. Und die Wahrheit: Mit zunehmender HSL-Helligkeit erhalten wir eine hellere Farbe und mit abnehmender Farbe eine dunklere. Aber was passiert, muss nicht unbedingt dieselbe Farbe haben.

Anpassen der Helligkeit mit konstantem Farbton und Farbsättigung

Beide Farben haben den gleichen Farbton und die gleiche Sättigung, aber sehen sie wie eine dunklere und hellere Version derselben Farbe aus?

Bei Verwendung des LCH-Farbmodells werden Farben mit derselben Leuchtkraft als Farben mit derselben Helligkeit und Farben mit derselben Farbintensität als Farben mit derselben Sättigung wahrgenommen.

Wie sind LCH-Farben angeordnet?

LCH ist die Abkürzung für Lightness, Chroma, Hue (Helligkeit, Farbe, Ton). Die Farbkomponenten in diesem Farbmodell haben eine gewisse Beziehung zu den Komponenten des HSL-Farbmodells. Es gibt jedoch gravierende Unterschiede zwischen den Komponenten dieser Farbmodelle.

Die Neigungswinkel im LCH stimmen nicht ganz mit den HSL-Tönen überein. Das heißt - 0 - das ist nicht ganz rot. Diese Farbe ist eher magenta. Und 180 ist keine türkisfarbene Farbe, sondern eher blaugrünlich und vollständig komplementär.

Farben mit der gleichen wahrgenommenen Helligkeit

Beachten Sie, dass diese Farben, obwohl sie einen sehr unterschiedlichen Ton haben, wie Farben aussehen, die die gleiche wahrgenommene Helligkeit haben.

Im HSL-Farbraum wird die Sättigung durch einen sauberen Wertebereich von 0 bis 100 dargestellt. Tatsache ist, dass dieser Raum das Ergebnis einer einfachen Transformation von RGB in Polarkoordinaten ist. In LCH ist der Wert der Chroma-Komponente jedoch theoretisch unbegrenzt. Der LCH-Standard (wie Lab) wurde entwickelt, um die gesamte Farbpalette darzustellen, die vom Menschen wahrgenommen wird. Nicht alle dieser Farben können auf dem Monitor angezeigt werden, auch nicht eine, die den P3-Farbraum unterstützt. Darüber hinaus sprechen wir nicht nur über die maximale Anzahl der angezeigten Farben, abhängig vom Farbumfang des Monitors, sondern auch über den Unterschied in den Farben.

Vielleicht ist diese Idee leichter zu verstehen, wenn ich sie anhand eines Beispiels illustriere. Stellen wir uns der Einfachheit halber vor, wir haben einen Monitor, dessen Farbumfang genau dem sRGB-Farbraum entspricht. Zum Vergleich: Der MacBook Air-Bildschirm 2013 könnte etwa 60% sRGB ausgeben, aber die meisten modernen Displays können, wie bereits erwähnt, 150% sRGB anzeigen. Für L = 50 und H = 180 (die Cyan-Probe in der obigen Abbildung) beträgt der Maximalwert von C nur 35! Für L = 50 und H = 0 (Pink) kann der Wert von C 77 erreichen, ohne über sRGB hinauszugehen. Für L = 50 und H = 320 (Lila) kann der Wert von C bis zu 108 betragen!

Obwohl das Fehlen von Rändern als etwas Erschreckendes empfunden werden kann (ob es sich um Personen oder Farbräume handelt), besteht kein Grund zur Sorge: Wenn eine Farbe festgelegt wird, die auf einem bestimmten Monitor nicht angezeigt werden kann, wird sie auf eine ähnliche Farbe reduziert, die vom Monitor unterstützt wird. Am Ende gibt es nichts Neues: Bis die Monitore einen Farbumfang erlangten, der die Fähigkeiten von sRGB übertraf, geschah genau dies mit den üblichen CSS-Farben, die auf Monitoren angezeigt wurden, deren Farbumfang geringer als sRGB war.

LCH Farbwähler

Ich hoffe, dass Sie jetzt auch ein wenig an der Idee interessiert sind, LCH-Farben zu verwenden. Dies wirft die Frage auf, wie diese Farben visualisiert werden können.

Tatsächlich habe ich vor langer Zeit das entsprechende Tool LCH Color Picker erstellt, das in erster Linie dazu dient, die LCH-Funktionen beim Bearbeiten von CSS Color 5 besser zu verstehen . Eine besteht darin, die Theorie zu kennen, und eine andere darin, mit den Schiebereglern experimentieren und das Ergebnis mit eigenen Augen sehen zu können. Ich habe sogar eine Domain gekauft, css.land , um dort relevante Beispiele zu veröffentlichen. Wir haben dieses Tool ein wenig benutzt, ich habe neue Funktionen hinzugefügt, aber ich habe nie darüber geschrieben. Daher stand dieses Tool nur uns und denjenigen zur Verfügung, die darauf geachtet habendieses Github-Repository.

Mittel zur Auswahl von LCH-Farben

Wenn Sie mit LCH-Farben experimentieren möchten, können Sie dieses Tool sehr gut verwenden. Hier sind einige Details über ihn:

Der Farbkonvertierungscode wurde von einem unserer Teammitglieder geschrieben. Wir sind zuversichtlich, dass die Berechnungen zumindest auf der Grundlage eines korrekten Verständnisses des Konvertierungsprozesses durchgeführt wurden (dh wenn etwas schief geht - dies ist ein Fehler im Code und nicht das Ergebnis eines Missverständnisses von etwas).
Die Chroma-Farbkomponente unterstützt eine Änderung in einem anderen Bereich als 0 - 100, wodurch sich unser Werkzeug von einigen anderen unterscheidet, die wir finden konnten.
Benutzer können beliebige CSS-Farben darin laden (über die Schaltfläche Importieren).
Mit den Schiebereglern können Sie nur ganzzahlige Werte eingeben. In den schwarzen Feldern über den Schiebereglern können Sie jedoch beliebige Zahlen eingeben.
Dabei können Sie Farben speichern und sehen, wie sie interpoliert werden.
Die Farbanalyse wird unterstützt, um festzustellen, ob sie zum sRGB-, P3-Farbraum (oder zu Rec.2020, sogar zu einem umfangreicheren Farbraum) gehört.
Unterstützte Transparenzeinstellung.
Und schließlich ist die Verwendung dieses Tools einfach interessant! Insbesondere wenn man bedenkt, dass es auf der Basis von Mavo implementiert ist (obwohl hier ein bisschen JavaScript verwendet wird, ist es kein Mavo-Projekt, das in reinem HTML erstellt wurde).

Wie in der Tat, können Sie die LCH Color Picker ausprobieren hier .

Fragen und Antworten

Nachdem ich diesen Artikel veröffentlicht hatte, stellten sie mir Fragen. Ich glaube, dass ich hier einige häufige Missverständnisse klären sollte.

▍Sie sagen, dass die Unterstützung für LCH-Farben in Browsern noch nicht implementiert ist, aber ich kann sie im Artikel sehen. Wie ist das möglich?

Alle in diesem Artikel verwendeten Farben fallen in den sRGB-Farbumfang. Dies liegt daran, dass wir bisher einfach keine Farben außerhalb von sRGB ausgeben können. sRGB ist ein Farbraum, keine Farbbeschreibungssyntax. Zum Beispiel, rgb(255 0 0)sie lch(54.292% 106.839 40.853)setzen die gleiche Farbe.

▍Wie zeigt der LCH-Farbwähler Farben außerhalb von sRGB an?

Mein Programm, LCH Color Picker, zeigt solche Farben nicht an. Und meines Wissens gibt es nirgendwo im Internet ein Programm, das solche Farben anzeigen kann. Das LCH Color Picker-Projekt wird mithilfe von Webtechnologien implementiert. Dies bedeutet, dass die Standardbeschränkungen für alle anderen Webseiten gelten. Ich konvertiere nicht ausgegebene Farben in sRGB. Anfangs habe ich die RGB-Farbkomponenten einfach auf 0-100% gebracht, aber dank dieser PR verwendet das Programm jetzt einen viel erfolgreicheren Algorithmus. Wir sprechen nämlich davon, den Wert der LCH-Komponente C zu reduzieren, bis die Farbe innerhalb der sRGB-Grenzen liegt. Deshalb führt eine Erhöhung des Wertes der Komponente C über einen bestimmten Grenzwert nicht zur Schlussfolgerung einer helleren Farbe. Tatsache ist, dass eine solche Farbe mit CSS noch nicht abgeleitet werden kann.

▍ Ich habe festgestellt, dass Firefox hellere Farben als Chrome und Safari anzeigt. Gibt es eine Verbindung zur LCH-Unterstützung?

Firefox hat den Teil der Spezifikation, der CSS-Farben auf sRGB-Frames beschränkt, nicht implementiert. Stattdessen übergibt der Browser einfach rohe RGB-Werte an den Bildschirm. Zum Beispiel rgb(100% 0% 0%)ist dies die hellste rote Farbe , dass ein Monitor darstellen kann. Obwohl dies wie eine kluge Lösung erscheint, sind wir hier mit Widersprüchen konfrontiert. Tatsache ist, dass Sie mit diesem Ansatz Farben bestenfalls nur annähernd einstellen können, da alle Bildschirme Farben unterschiedlich anzeigen. Durch die Beschränkung der CSS-Farben auf einen bekannten Farbraum (sRGB) erhalten wir Geräteunabhängigkeit. Die LCH- und Lab-Farbräume sind ebenfalls geräteunabhängig, da sie auf der tatsächlich gemessenen Farbe basieren.

▍ Was können Sie über das Farbdesign (display-p3 rgb) sagen? Safari unterstützt es seit 2017!

Ich wurde darüber informiert, nachdem ich diesen Artikel veröffentlicht hatte. Ich habe lange gewusst, dass Safari an dieser Funktion arbeitet, aber irgendwie habe ich den Moment verpasst, als sie fertig war. Tatsächlich wurde im letzten Monat dieser Artikel veröffentlicht , der diese Syntax in WebKit beschreibt. Tolle

Design color(colorspaceid params)ist eine in CSS Color 4 beschriebene Funktion. In Bezug auf das Farbmanagement in CSS kann sie mit einem Schweizer Messer verglichen werden. Das Tolle an diesem Design ist, dass Sie das ICC-Farbprofil und die daraus entnommenen Farben festlegen können. Dies kann beispielsweise nützlich sein, wenn Sie echte CMYK- oder Pantone-Farben auf einer Webseite verwenden möchten. Dieses Design unterstützt auch einige vordefinierte Farbräume, von denen einer display-p3 ist. Zum Beispiel color(display-p3 0 1 0)gibt es uns die hellste grüne Farbe im P3-Farbraum. Um die Unterstützung für dieses Design zu testen, können Sie diesen Test verwenden. color()Wenn keine Unterstützung vorhanden ist , wird eine rote Farbe und, falls verfügbar, eine hellgrüne Farbe angezeigt.

Obwohl dies eine erstaunliche Funktion ist (und ich meinen LCH Color Picker neu erstellen muss, damit das Programm ihn verwenden kann, color()wenn diese Funktion unterstützt wird), achten Sie darauf, dass nur das erste der von mir genannten Probleme gelöst wird. Wir sprechen nämlich über den Zugriff auf alle Farben aus dem Farbumfang. Da das Tool jedoch color()auf RGB basiert, weist es alle mit RGB verbundenen Nachteile auf. Es zeichnet sich nicht durch eine einheitliche Wahrnehmung aus. Mit Hilfe der Farbparameter ist es schwierig, Farboptionen zu erstellen (hellere oder dunklere Optionen, mehr oder weniger hell usw.).

Darüber hinaus stelle ich fest, dass dies eine vorübergehende Lösung ist. Jetzt ist es aufgrund der Tatsache anwendbar, dass Bildschirme, die Farben anzeigen können, die nicht in P3 passen, selten sind. Nach einer weiteren Verbesserung der Displays stellt sich jedoch heraus, dass das Design color(display-p3 ...)dieselben Probleme aufweist wie RGB-Farben.

Die Farbräume LCH und Lab sind geräteunabhängig, können alle für den Menschen sichtbaren Farben darstellen und bleiben daher unabhängig von der Hardwareentwicklung relevant.

Liebe Leser! Möchten Sie LCH-Farben in CSS verwenden?

CSS LCH Farben