Eine Schnelltour durch 4 neue CSS-Farbfeatures 

Ich habe gerade in meinem Artikel „Was ist neu seit CSS3?“ über aktuelle und mögliche zukünftige Änderungen bei CSS-Farben geschrieben. Es ist seltsamerweise viel. Es gibt genauso viele oder mehr neue und bevorstehende Möglichkeiten, Farben zu definieren, als wir jetzt haben. Ich dachte, wir werfen einen ganz schnellen Blick darauf.

Zuerst eine wichtige Vorwarnung. Dieser Kram ist so kompliziert. Ich verstehe ihn kaum. Aber hier sind einige Aspekte

• Vor all diesen bevorstehenden Änderungen hatten wir *nur* RGB als Farbmodell, und alles beschäftigte sich damit.
• Wir hatten verschiedene „Farbräume“, die es unterschiedlich handhabten (z.B. die rgb()-Funktion bildete dieses RGB-Farbmodell als Würfel mit linearen Koordinaten ab, die hsl()-Funktion bildete dieses RGB-Farbmodell als Zylinder ab), aber es war alles sRGB-Farbraum.
• Mit den bevorstehenden Änderungen erhalten wir neue Farbmodelle *und* (!) neue Funktionen, die dieses Farbmodell unterschiedlich abbilden. Ich denke, das ist eine Art Doppel-Triple-Wucht.

Ich kann Sie persönlich nicht über alle Einzelheiten aufklären – ich schreibe das, weil ich wette, dass es viele von Ihnen wie mich gibt, die sich fragen, warum sie sich überhaupt darum kümmern sollten, und dies ist mein Versuch zu verstehen, warum *ich* mich darum kümmern sollte.

Display-P3 ist eines, das eine Menge lebendigerer Farben öffnet, die zuvor ausgedrückt werden konnten.

body {
  background: color(display-p3 1 0.08 0); /* super red! */
}

Es stellt sich heraus, dass moderne Monitore viel mehr Farben anzeigen können, insbesondere extra lebendige, aber wir haben keine Möglichkeit, diese Farben mit klassischen CSS-Farbsyntaxen wie HEX, RGB und HSL zu definieren. Super seltsam, oder?! Aber wenn Sie Display-P3 verwenden, erhalten Sie einen breiteren Zugriff auf diese lebendigen Farben.

Die Dev-Agentur Panic hat sich frühzeitig darauf eingelassen und begann, diese Farben als „Geheimwaffe“ einzusetzen

🌈 Zusammen mit WebGL sind p3-Farben jetzt ein wichtiger Teil des Geheimwaffenarsenals von Panic. Psst, verraten Sie es niemandem, aber Sie sollten sich diese Seite auf einem iMac Pro-Bildschirm ansehen! https://#/glrhPNuCdR

— Panic (@panic) 24. Mai 2019

Jen Simmons erklärt auch, wie man sie verwendet, einschließlich eines Fallbacks für Browser, die sie nicht unterstützen

Display P3 Farbe. Design im Browser. Erstaunlich.

Lassen Sie mich Ihnen zeigen, wie Sie zu P3 wechseln, eine Farbe finden und dann eine Fallback-Farbe für ältere Browser finden. Alles, während Sie im Safari Web Inspector arbeiten. (Schalten Sie den Ton ein, um meine Erklärung zu hören!) pic.twitter.com/AaKhrn2s3e

— Jen Simmons (@jensimmons) 5. Januar 2022

Ressourcen

• Wide Gamut Color in CSS with Display-P3 (WebKit Blog)
• The Expanding Gamut of Color on the Web (Ollie Williams)

HWB ist das, das eher „für Menschen“ ist, aber das ist etwas umstritten und es basiert immer noch auf sRGB.

Ich wusste nicht, dass hwb() existiert – ein Hoch auf Stefan Judis für seinen Blog-Artikel darüber.

Normalerweise halte ich HSL für das CSS-Farbformat, das „für Menschen“ ist (und gut für die programmatische Steuerung), denn die Manipulation von 360° Farbton und 0-100% Sättigung und Helligkeit ergeben einen gewissen offensichtlichen Sinn.

Aber in hwb() haben wir Farbton (dasselbe wie bei HSL, glaube ich), dann Weißheit und Schwarzheit. Stefan

Das Hinzufügen von Weiß und Schwarz zu einer Farbe beeinflusst ihre Sättigung. Angenommen, Sie fügen einer Farbe die gleiche Menge an Weiß und Schwarz hinzu, der Farbton bleibt gleich, aber die Farbe verliert an Sättigung. Dies funktioniert bis zu 50 % Weiß und 50 % Schwarz (hwb(0deg 50% 50%)), was zu einer achromatischen Farbe führt.

Stefan äußerte Zweifel daran, dass dies einfacher zu verstehen ist als HSL, und ich stimme ihm zu. Ich muss mich wahrscheinlich erst daran gewöhnen, aber es scheint eher *abstrakt* zu sein, als einfach nur die Helligkeit oder Sättigung zu ändern.

HWB ist auf denselben Farbraum (sRGB) beschränkt wie alle alten Farbformate. Hier werden keine neuen Farben freigeschaltet.

Ressourcen

• HWB-Farbpicker
• hwb() – eine Farbnotation für Menschen? (Stefan Judis)

LAB ist wie rgb() mit einem viel größeren Farbraum

div {
  background: lab(150% -400 400);
}

Mir gefiel Eric Portis' Erklärung von LAB, als ich ihn danach fragte

LAB ist wie RGB insofern, als es drei lineare Komponenten gibt. Niedrigere Zahlen bedeuten weniger von der Sache, größere Zahlen bedeuten mehr von der Sache. Sie könnten also LAB verwenden, um das hellste, grünste Grün aller Zeiten zu spezifizieren, und es wird für jeden super hell und grün sein, aber heller und grüner auf Monitoren mit breiteren Farbräumen.

Wir bekommen also all die zusätzliche Farbe, was großartig ist, aber sRGB hatte dieses *andere* Problem (abgesehen von der begrenzten Farbdarstellung), dass es nicht *wahrnehmungsuniform* ist. Brian Kardell

Der sRGB-Raum ist nicht wahrnehmungsuniform. Die gleiche mathematische Bewegung hat unterschiedliche Grade der wahrgenommenen Wirkung, je nachdem, wo Sie sich im Farbraum befinden. Wenn Sie die Erfahrungen eines Designers damit lesen möchten, hier ist ein interessantes Beispiel, das sich gut damit abmüht.

Das klassische Beispiel hier ist, wie bei HSL Farben mit exakt derselben „Helligkeit“ sich überhaupt nicht gleich anfühlen.

HSL vs LAB:: Helligkeit 💡

Gleiche Farben aus unserer kniffligen Farb-Umfrage, aber diesmal habe ich LABs Version derselben Farbe darüber gelegt. Beachten Sie, wie viel näher LABs Helligkeitswert den Ergebnissen unserer Umfrage kommt!

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

— Adam Argyle (@argyleink) 3. Dez 2019

Aber in LAB ist es anscheinend wahrnehmungsuniform, was bedeutet, dass die programmatische Manipulation von Farben eine viel vernünftigere Aufgabe ist. Und ein weiterer Bonus ist, dass LAB-Farben als geräteunabhängig spezifiziert sind. Hier ist Michelle Barker

LAB und LCH sind in der Spezifikation als geräteunabhängige Farben definiert. LAB ist ein Farbraum, auf den in Software wie Photoshop zugegriffen werden kann, und wird empfohlen, wenn eine Farbe auf dem Bildschirm genauso aussehen soll wie beispielsweise auf einem T-Shirt gedruckt.

Ressourcen

• lab() (MDN)
• Ein Leitfaden zu modernen CSS-Farben mit RGB, HSL, HWB, LAB und LCH (Michelle Barker)

LCH ist wie hsl() mit einem viel größeren Farbraum

Erinnern Sie sich, wie ich sagte, dass HSL „für Menschen“ ist, weil es einfacher zu verstehen ist als RGB? Das Ändern von Farbton, Sättigung und Helligkeit ergibt viel logischen Sinn. Ähnlich hier bei lch(), wo wir Helligkeit, Chroma (Sättigung) und Farbton haben. Zurück zu meinem Gespräch mit Eric Portis

LCH ist eher wie HSL: ein Polarraum. H = Farbton = ein Kreis. Das Durchführen von Berechnungen, um komplementäre Farben auszuwählen (oder welche Transformationen auch immer Sie anstreben), wird trivial (addieren Sie einfach 180 – oder was auch immer!).

Ich nehme an, Sie würden LCH wählen, nur weil Sie die Syntax davon mögen oder weil es eine komplizierte programmatische Sache, die Sie tun wollen, einfacher macht – und Sie bekommen die Tatsache, dass es kostenlos 50 % mehr Farben ausdrücken kann.

Wir bekommen auch hier die wahrnehmungsuniforme Gleichheit. Hier ist Lea Verou, die begeistert zu sein scheint, dass Helligkeit tatsächlich etwas bedeuten wird

In HSL ist die Helligkeit bedeutungslos. Farben können denselben Helligkeitswert haben, mit stark unterschiedlicher wahrgenommener Helligkeit. [...] Mit LCH sind alle Farben mit derselben Helligkeit gleichermaßen wahrnehmungshell, und alle Farben mit derselben Chroma sind gleichermaßen wahrnehmungssaturiert.

Ein weiterer Vorteil des neuen Modells ist, dass wir uns vom „grauen Totraum“ (The gray dead zone) in CSS-Farbverläufen reinwaschen können. Ich glaube, wegen dieser wahrnehmungsuniformen Sache werden zwei satte Farben nicht frech werden und sich durch nicht-satte Gebiete gradientieren.

Hier ist eine kleine persönliche Vorhersage: Ich würde sagen, dass lch() wahrscheinlich ein Liebling von Designern sein wird. Bald wird es eine Menge neuer Farbauswahlmöglichkeiten geben und es ist zu schwierig und seltsam, immer wieder verschiedene auszuwählen. LCH scheint den meisten Nutzen für den gedanklichen Aufwand zu bieten.

Ressourcen

• lch() (MDN)
• LCH-Farben in CSS: Was, warum und wie? (Lea Verou)
• LCH-Farbpicker

„OK“

LAB und seine Freunde scheinen *so neu* zu sein, weil sie neu sind... für CSS. Aber LAB wurde in den 1940er Jahren erfunden. In einem Gespräch mit Adam Argyle verwendete er einen einprägsamen Satz: *Alle Farbräume haben eine Achillesferse*. Das heißt, etwas, worin sie irgendwie schlecht sind. Für sRGB ist es das graue tote Zonen-Problem, sowie der begrenzte Farbraum. LAB ist großartig und so, aber es hat definitiv seine eigenen Schwächen. Zum Beispiel reist ein blau-zu-weiß-Gradient in LAB ziemlich unbeholfen durch Purpurtal.

Im Dezember 2020 sagt Björn Ottosson: „Hey, ein neuer Farbraum wurde gerade veröffentlicht“, und jetzt gibt es OKLAB. Anscheinend sehen die CSS-Mächtigen genug Wert in diesem Farbraum, dass sowohl oklab() als auch oklch() bereits spezifiziert sind. Ich schätze, wir sollten uns darum kümmern, weil sie einfach *generell besser* sind, aber zitieren Sie mich nicht falsch.

Warum verwendet Display P3 die color()-Funktion, aber die anderen nicht?

Ich weiß es nicht wirklich. Ich denke, die CSS color()-Funktion ist etwas neuer und so hat Safari sie zuerst integriert. Ich habe keine Ahnung, ob Display P3 eine eigene dedizierte Funktion bekommt, oder ob wir alle einfach CSS color() verwenden sollten, oder was.

/* This is how you use Display P3 */
color(display-p3 1 0.08 0); 

/* But this doesn't work */
color(oklch 42.1% 0.192 328.6);

/* You gotta do this instead 🤷‍♀️ */
oklch(42.1% 0.192 328.6);

/* But you can use the color space within a gradient... */
background-image: linear-gradient(
    to right 
    in oklch,
    lch(50% 100 100), 
    lch(50% 100 250)
  );

Die relative Farbsyntax ist super nützlich.

Es gibt diese wirklich coole Fähigkeit, die als „relative Farbsyntax“ bezeichnet wird, mit der Sie eine CSS-Farbe im Grunde dekonstruieren können, während Sie sie in ein anderes Format übertragen. Nehmen wir an, Sie haben die (offensichtlich) berühmteste CSS HEX-Farbe aller Zeiten, Fog Dog, und Sie möchten sie stattdessen in HSL umwandeln

body {
  background: hsl(from #f06d06 h s l);
}

Vielleicht ist das nicht sofort sehr nützlich, aber hey, jetzt können wir ihr Alpha hinzufügen! Es gibt buchstäblich keine andere Möglichkeit, einem bestehenden HEX-Farbwert Alpha hinzuzufügen, also ist das ziemlich großartig

body {
  background: hsl(from #f06d06 h s l / 0.5);
}

Aber ich kann sie auch manipulieren. Sagen wir, ich möchte Fog Dog etwas mehr sättigen, bevor ich Opazität hinzufüge, weil die geringere Opazität sie natürlich mattiert und ich dem entgegenwirken möchte. Ich kann calc() auf den impliziten Variablen verwenden

body {
  background: hsl(from #f06d06 h calc(s + 20%) l / 0.5);
}

Das ist so cool. Ich bin sicher, wir werden einige *erstaunliche* Dinge daraus machen. Und es ist definitiv nicht auf HSL beschränkt. Ich habe nur HSL verwendet, weil es für mich im Moment bequem ist. Ich könnte mit der benannten Farbe red beginnen und sie in LCH manipulieren, wenn ich möchte

body {
  background: lch(from red l calc(c + 15) h / 0.25);
}

Diese Dinge werden am nützlichsten sein, wenn sie großzügig mit benutzerdefinierten Eigenschaften kombiniert werden.

Es gibt keine speziellen Funktionen mehr nur für Alpha.

Nur um das klarzustellen: keine Kommas vor dem Alpha-Wert in einer CSS-Farbfunktion – nur ein Schrägstrich stattdessen

/* Old! */
rgb(255, 0, 0);
rgba(255, 0, 0, 0.5);

/* New! */
rgb(255 0 0);
rgb(255 0 0 / 0.5);
hsl(0deg 40% 40%)
hsl(0deg 40% 40% / 90%) /* can be percentage rather than 0.9 or whatever */

/* The New color stuff ONLY has the single base function, no alpha secondardy function */
lab(49% 39 80)
lab(49% 39 80 / 0.25)

/* Display P3, with the color function, essentially works the same way with the slash */
color(display-p3 1 0.08 0 / 0.25); 

Sie können sogar Ihren eigenen CSS-Farbraum definieren.

Aber daran kann ich mich buchstäblich nicht einmal denken. Es haut mich um, Entschuldigung.