Request for Comments: Color Spaces

In den letzten Jahren gab es viele spannende Arbeiten an den CSS-Farbspezifikationen, und da diese langsam in Browsern Einzug halten, bereiten wir uns darauf vor, auch die Unterstützung dafür in Sass zu integrieren. Der erste und größte Teil davon ist die Hinzufügung von Unterstützung für Farbräume zu Sass, was eine riesige (aber größtenteils abwärtskompatible) Neugestaltung der Funktionsweise von Farben bedeutet.

Historisch gesehen existierten alle Farben in CSS im selben Farbraum, bekannt als "sRGB". Egal, ob Sie sie als Hex-Code, hsl()-Funktion oder Farbnamen darstellen, sie repräsentierten dieselbe Menge sichtbarer Farben, die Sie einem Bildschirm anzeigen lassen konnten. Obwohl dies konzeptionell einfach ist, gibt es einige größere Nachteile.

• Im Laufe der Zeit sind Monitore immer besser geworden und können mehr Farben anzeigen, als im sRGB-Farbraum dargestellt werden können können.

• sRGB korrespondiert auch bei der Verwendung über hsl() nicht sehr gut damit, wie Menschen Farben wahrnehmen. Cyan wirkt mit denselben Sättigungs- und Helligkeitswerten merklich heller als Lila als Lila.

• Es gibt keine Möglichkeit, domänen- oder gerätespezifische Farbräume darzustellen, wie z. B. den CMYK-Farbraum, der von Druckern verwendet wird.

Farbräume lösen all diese Probleme. Jetzt hat nicht jede Farbe einen Rot-, Grün- und Blaukanal (der als Farbton, Sättigung und Helligkeit interpretiert werden kann). Stattdessen hat jede Farbe einen spezifischen Farbraum, der festlegt, welche Kanäle sie hat. Zum Beispiel hat die Farbe oklch(80% 50% 90deg) oklch als ihren Farbraum, 80% Helligkeit, 50% Chroma und 90deg Farbton.

Farbräume in SassFarbräume in Sass  Permalink

Heute kündigen wir einen Vorschlag an, wie Farbräume in Sass gehandhabt werden. Zusätzlich zur Erweiterung der Farbwerte von Sass zur Unterstützung von Farbräumen definiert dieser Vorschlag Sass-ifizierte Versionen aller Farbfunktionen aus CSS Color Level 4.

FaustregelnFaustregeln  Permalink

Es gibt mehrere Faustregeln für die Arbeit mit Farbräumen in Sass.

• Die Farbräume rgb, hsl und hwb gelten als "Legacy-Räume" und erhalten oft eine spezielle Behandlung aus Gründen der Abwärtskompatibilität. Farben, die mit Hex-Notation oder CSS-Farbnamen definiert sind, gelten als Teil des rgb-Farbraums. Legacy-Farben werden im kompatibelsten Format ausgegeben. Dies entspricht dem eigenen Abwärtskompatibilitätsverhalten von CSS.

• Andernfalls bleibt jede in einem bestimmten Raum definierte Farbe in diesem Raum und wird in diesem Raum ausgegeben.

• Autoren können den Farbraum einer Farbe explizit konvertieren, indem sie color.to-space() verwenden. Dies kann nützlich sein, um ein Verhalten, das kein Legacy ist, zu erzwingen, indem in einen Nicht-Legacy-Raum konvertiert wird, oder um sicherzustellen, dass die Farbausgabe mit älteren Browsern kompatibel ist, indem Farben vor der Ausgabe in einen Legacy-Raum konvertiert werden wird.

• Der srgb-Farbraum ist äquivalent zu rgb, mit der Ausnahme, dass der eine ein Legacy-Raum ist und der andere nicht. Sie verwenden auch unterschiedliche Koordinatensysteme, wobei rgb() einen Bereich von 0-255 akzeptiert und srgb einen Bereich von 0-1 verwendet.

• Farbfunktionen, die die Angabe eines Farbraums für die Manipulation zulassen, verwenden standardmäßig immer den Quellfarbraum. Wenn ein expliziter Raum für die Manipulation angegeben wird, wird die resultierende Farbe immer noch im selben Raum wie die Ursprungsfarbe zurückgegeben. Bei color.mix() gilt der erste Farbparameter als Ursprungs- Farbe.

• Alle Legacy- und RGB-ähnlichen Räume repräsentieren begrenzte Farbbereiche (Gamuts). Da die Abbildung von Farben auf einen Farbbereich ein verlustbehafteter Prozess ist, sollte dies im Allgemeinen Browsern überlassen werden, die Farben nach Bedarf basierend auf den Fähigkeiten eines Displays abbilden können. Aus diesem Grund werden Werte außerhalb des Farbbereichs von Sass nach Möglichkeit beibehalten, auch beim Konvertieren in farbbereichsgebundene Farbräume. Die einzige Ausnahme ist, dass die Farbräume hsl und hwb keine Farben außerhalb des Farbbereichs ausdrücken können, sodass die Konvertierung von Farben in diese Räume die Farben ebenfalls auf den Farbbereich abbildet. Autoren können auch eine explizite Abbildung auf den Farbbereich mit der Funktion color.to-gamut() durchführen durchführen.

• Legacy-Browser benötigen Farben im srgb-Farbbereich. Die meisten modernen Displays unterstützen jedoch den breiteren display-p3-Farbbereich Farbbereich.

Standard CSS-FarbfunktionenStandard CSS-Farbfunktionen  Permalink

oklab() und oklch()oklab() und oklch()  Permalink

Die Funktionen oklab() (kubisch) und oklch() (zylindrisch) bieten Zugang zu einem unbegrenzten Farbbereich in einem wahrnehmungsuniformen Raum. Autoren können diese Funktionen verwenden, um zuverlässig gleichmäßige Farben zu definieren. Zum Beispiel sind die folgenden Farben in Bezug auf Helligkeit und Sättigung wahrnehmungsähnlich.

$pink: oklch(64% 0.196 353); // hsl(329.8 70.29% 58.75%)
$blue: oklch(64% 0.196 253); // hsl(207.4 99.22% 50.69%)

Das oklch()-Format verwendet konsistente "Helligkeits"- und "Chroma"-Werte, während das hsl()-Format dramatische Änderungen sowohl bei "Helligkeit" als auch bei "Sättigung" zeigt. Daher ist oklch oft der beste Raum für konsistente Transformationen.

lab() und lch()lab() und lch()  Permalink

Die Funktionen lab() und lch() bieten Zugang zu einem unbegrenzten Farbbereich in einem Raum, der weniger wahrnehmungsuniform ist, aber weiter verbreitet als OKLab und OKLCH.

hwb()hwb() permalink

Sass unterstützt jetzt eine Top-Level-Funktion hwb(), die dieselbe Syntax wie die integrierte hwb()-Syntax von CSS verwendet.

color()color() permalink

Die neue Funktion color() bietet Zugang zu einer Reihe von Spezialräumen. Insbesondere ist display-p3 ein gängiger Raum für Monitore mit großem Farbbereich, was ihn wahrscheinlich zu einer der beliebteren Optionen für Autoren macht, die einfach nur Zugang zu einem größeren Farbbereich wünschen. Zum Beispiel sind P3-Grünschattierungen signifikant "heller" und gesättigter als die in sRGB verfügbaren Grünschattierungen.

$fallback-green: rgb(0% 100% 0%);
$brighter-green: color(display-p3 0 1 0);

Sass wird alle vordefinierten Farbräume, die in der Color Level 4-Spezifikation deklariert sind, nativ unterstützen. Es wird auch unbekannte Farbräume unterstützen, obwohl diese nicht in und aus anderen Farbräumen konvertiert werden können konvertiert werden können.

Neue Sass-FarbfunktionenNeue Sass-Farbfunktionen  Permalink

color.channel()color.channel() permalink

Diese Funktion gibt den Wert eines einzelnen Kanals in einer Farbe zurück. Standardmäßig unterstützt sie nur Kanäle, die im eigenen Raum der Farbe verfügbar sind. Sie können jedoch den Parameter $space übergeben, um den Wert des Kanals nach der Konvertierung in den angegebenen Raum zurückzugeben.

$brand: hsl(0 100% 25.1%);

// result: 25.1%
$hsl-lightness: color.channel($brand, "lightness");

// result: 37.67%
$oklch-lightness: color.channel($brand, "lightness", $space: oklch);

color.space()color.space() permalink

Diese Funktion gibt den Namen des Farbraums der Farbe zurück.

// result: hsl
$hsl-space: color.space(hsl(0 100% 25.1%));

// result: oklch
$oklch-space: color.space(oklch(37.7% 38.75% 29.23deg));

color.is-in-gamut(), color.is-legacy()color.is-in-gamut(), color.is-legacy() permalink

Diese Funktionen geben verschiedene Fakten über die Farbe zurück. color.is-in-gamut() gibt zurück, ob die Farbe für ihren Farbraum im Farbbereich liegt (im Gegensatz dazu, dass einer oder mehrere ihrer Kanäle außerhalb des Bereichs liegen, wie z. B. rgb(300 0 0)). color.is-legacy() gibt zurück, ob die Farbe eine Legacy-Farbe im rgb-, hsl- oder hwb-Farbraum ist.

color.is-powerless()color.is-powerless() permalink

Diese Funktion gibt zurück, ob ein bestimmter Kanal in der gegebenen Farbe "kraftlos" ist. Dies ist ein spezieller Zustand, der für einzelne Farbräume definiert ist und angibt, dass der Wert eines Kanals die Anzeige einer Farbe nicht beeinflusst beeinflusst.

$grey: hsl(0 0% 60%);

// result: true, because saturation is 0
$hue-powerless: color.is-powerless($grey, "hue");

// result: false
$hue-powerless: color.is-powerless($grey, "lightness");

color.same()color.same() permalink

Diese Funktion gibt zurück, ob zwei Farben auf die gleiche Weise angezeigt werden, auch wenn dies eine Konvertierung zwischen Räumen erfordert. Dies steht im Gegensatz zum ==-Operator, der Farben in verschiedenen Nicht-Legacy-Räumen immer als ungleich betrachtet.

$orange-rgb: #ff5f00;
$orange-oklch: oklch(68.72% 20.966858279% 41.4189852913deg);

// result: false
$equal: $orange-rgb == $orange-oklch;

// result: true
$same: color.same($orange-rgb, $orange-oklch);

Bestehende Sass-FarbfunktionenBestehende Sass-Farbfunktionen  Permalink

color.scale(), color.adjust() und color.change()color.scale(), color.adjust() und color.change()  Permalink

Standardmäßig werden alle Sass-Farbtransformationen im Farbraum des ursprünglichen Farbparameters verarbeitet und zurückgegeben. Alle relevanten Funktionen erlauben jedoch jetzt die Angabe eines expliziten Farbraums für Transformationen. Zum Beispiel sind Anpassungen der Helligkeit & Dunkelheit in oklch am zuverlässigsten am zuverlässigsten.

$brand: hsl(0 100% 25.1%);

// result: hsl(0 100% 43.8%)
$hsl-lightness: color.scale($brand, $lightness: 25%);

// result: hsl(5.76 56% 45.4%)
$oklch-lightness: color.scale($brand, $lightness: 25%, $space: oklch);

Beachten Sie, dass die zurückgegebene Farbe immer noch im ursprünglichen Farbraum ausgegeben wird, auch wenn die Anpassung in einem anderen Raum durchgeführt wird.

color.mix()color.mix() permalink

Die Funktion color.mix() behält ihr bestehendes Verhalten für Legacy-Farbräume bei, aber für neue Farbräume wird sie der CSS-"Farbinterpolations"-Spezifikation entsprechen. So berechnet CSS, welche Farbe zwischen zwei Farben in einem Farbverlauf oder einer Animation verwendet werden soll.

Veraltete FunktionenVeraltete Funktionen  Permalink

Eine Reihe bestehender Funktionen sind nur für Legacy-Farben sinnvoll und werden daher zugunsten farbraumfreundlicher Funktionen wie color.channel() und color.adjust() eingestellt.

• color.red()
• color.green()
• color.blue()
• color.hue()
• color.saturation()
• color.lightness()
• color.whiteness()
• color.blackness()
• adjust-hue()
• saturate()
• desaturate()
• transparentize()/fade-out()
• opacify()/fade-in()
• lighten()/darken()

Sagen Sie uns Ihre Meinung!Sagen Sie uns Ihre Meinung!  Permalink

Es gibt noch viele weitere Details zu diesem Vorschlag, und er ist noch nicht in Stein gemeißelt. Wir möchten Ihr Feedback dazu haben! Lesen Sie ihn auf GitHub und erstellen Sie ein Issue mit allen Gedanken oder Bedenken, die Sie haben mögen könnten.