Mehr Farben und neue Bereiche

Dieses Dokument ist Teil des High-Definition CSS-Farbleitfadens.

CSS Color 4 beschreibt eine Reihe neuer Funktionen und Tools für CSS und Farbe. Der folgende Codepen zeigt alle neuen und alten Farbsyntaxen zusammen:

Zusammenfassung der klassischen Farbräume

Mit der Spezifikation für Ebene 4 wurden 12 neue Farbräume für die Suche nach Farben eingeführt, die den sieben neuen Farbskalen entsprechen:

• sRGB – linear
• LCH
• okLCH
• Lab
• okLAB
• Display (P3)
• Rec2020
• a98 RGB
• Pro Photo (RGB)
• XYZ
• XYZ d50
• XYZ d65

Die neuen Farbräume im Web

Mit den folgenden Farbräumen ist eine größere Farbpalette als bei sRGB verfügbar. Der Farbraum Display-p3 bietet fast doppelt so viele Farben wie RGB, während Rec2020 fast doppelt so viele Farben bietet wie Display-p3. Das sind ganz schön viele Farben!

Die color()-Funktion

Die neue color()-Funktion kann für jeden Farbraum verwendet werden, der Farben mit R-, G- und B-Kanälen angibt. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einige Alphawerte.

Viele der neuen Farbräume nutzen diese Funktion, da spezielle Funktionen wie rgb, srgb, hsl, hwb usw. zu einer langen Liste wurden, sodass der Farbraum einfacher als Parameter verwendet werden konnte.

Vorteile

• Ein normalisierter Bereich für den Zugriff auf Farbräume, die RGB-Kanäle verwenden.
• Es kann auf jeden RGB-basierten Farbraum mit großem Farbraum skaliert werden.

Nachteile

• Funktioniert nicht mit HSL, HWB, LCH, okLCH oder okLAB

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

sRGB über color()

Dieser Farbraum bietet dieselben Funktionen wie rgb(). Außerdem sind Dezimalzahlen zwischen 0 und 1 verfügbar, die genau wie 0% bis 100 % verwendet werden.

Vorteile

• Fast alle Displays unterstützen diesen Farbraum.
• Unterstützung für Designtools.

Nachteile

• Nicht wahrnehmbar linear (wie dies lch() ist)
• Keine Wide-Gamut-Farben.
• Farbverläufe durchlaufen oft eine Tote Zone.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

Lineares sRGB über color() {#linear-srgb}

Diese lineare Alternative zu RGB bietet vorhersehbare Kanalintensität.

Vorteile

• Direkter Zugriff auf RGB-Kanäle, nützlich für Funktionen wie Spiel-Engines oder Lichtshows

Nachteile

• Nicht wahrnehmbar linear.
• Die Ränder haben jeweils schwarz-weiß.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

Farbverläufe werden später noch ausführlicher behandelt. Es ist jedoch schnell sinnvoll, einen Schwarz-zu-Weiß-Farbverlauf von srgb und linear-srgb zu sehen, um die Unterschiede zu veranschaulichen:

LCH

LCH führt eine Syntax für den Zugriff auf Farben außerhalb des RGB-Gamuts ein. Sie ist auch das erste, das es sehr einfach macht, Farben außerhalb der Farbpalette für ein Display zu erstellen. Das liegt daran, dass alle CIE-Farbraumfarben (lch, oklch, Lab, Oklab) das gesamte für Menschen sichtbare Farbspektrum darstellen können.

Dieser Farbraum ist dem menschlichen Sehen modelliert und bietet Syntax, um diese und weitere Farben anzugeben. Die LCH-Kanäle sind Helligkeit, Chroma und Farbton. Farbton ist ein Winkel, wie bei HSL und HWB. Helligkeit ist ein Wert zwischen 0 und 100. Es ist eine spezielle "wahrnehmlich lineare", menschenzentrierte Helligkeit. Chroma ähnelt der Sättigung. Sie kann zwischen 0 und 230 liegen, ist aber technisch unbegrenzt.

Vorteile

• Vorhersehbare Farbmanipulation dank wahrnehmbar linearer Farbpalette, zumeist linear (siehe oklch).
• Nutzt bekannte Kanäle.
• Hat häufig lebhafte Farbverläufe.

Nachteile

• Einfach rauskommen.
• In seltenen Fällen muss möglicherweise der Mittelpunkt des Farbverlaufs angepasst werden, um eine Farbtonverschiebung zu verhindern.

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

LAB

Ein weiterer Farbraum, der für den Zugriff auf den CIE-Gamut erstellt wurde, wieder mit einer wahrnehmlich linearen Helligkeitsdimension (L). Das A und B in Lab stellen die einzigartigen Achsen der menschlichen Farbwahrnehmung dar: Rot-Grün und Blau-Gelb. Wenn A einen positiven Wert erhält, wird Rot hinzugefügt und Grün hinzugefügt, wenn der Wert unter 0 liegt. Wenn B eine positive Zahl erhält, wird Gelb hinzugefügt, wobei negative Werte in Richtung Blau gehen.

Vorteile

• Wahrhaft konsistente Farbverläufe.
• High Dynamic Range.

Nachteile

• Potenzial für Farbtonverschiebung.
• Beim Lesen von Werten ist es schwierig, den Autor zu schreiben oder eine Farbe zu erraten.

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

Dieser Farbraum ist korrigierbar von LCH. Und wie LCH stellt (L) weiterhin die wahrnehmlich lineare Helligkeit dar, C für Chroma und H für Farbton.

Dieser Bereich kommt mir bekannt vor, wenn Sie mit HSL oder LCH gearbeitet haben. Wähle einen Winkel im Farbrad für H und durch Anpassung von L einen Helligkeits- oder Dunkelheitsgrad aus, aber dann haben wir Chroma anstelle von Sättigung. Sie sind ziemlich identisch, abgesehen davon, dass die Anpassungen an Helligkeit und Chroma meist paarweise erfolgen. Oder es kann einfach sein, Farben mit hohem Chroma zu verlangen, die außerhalb eines Zielgamuts liegen.

Vorteile

• Keine Überraschungen beim Arbeiten mit blauen und lila Farbtönen.
• Perzeptiv lineare Helligkeit.
• Nutzt bekannte Kanäle.
• High Dynamic Range.
• Verfügt über eine moderne Farbauswahl – von Evil Martians.

Nachteile

• Einfach rauskommen.
• Neu und noch relativ unerforscht.
• Wenige Farbauswahl.

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

OKLAB

Dieser Bereich ist die Korrektur des LAB. Es wird als Bereich bezeichnet, der auch für die Bildverarbeitungsqualität optimiert ist. In CSS stehen für uns Farbverläufe und die Manipulation von Farbfunktionen zur Verfügung.

Vorteile

• Standardbereich für Animationen und Interpolationen.
• Perzeptiv lineare Helligkeit.
• Keine Farbtonänderung wie LAB.
• Wahrhaft konsistente Farbverläufe.

Nachteile

• Neu und noch relativ unerforscht.
• Wenige Farbauswahl.

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

Display P3

Die Farbskala und der Farbraum des Displays P3 sind sehr beliebt, seit Apple sie seit 2015 auf dem iMac unterstützt. Apple hat Display-p3 auch seit 2016 auf Webseiten über CSS unterstützt und ist damit fünf Jahre älter als jeder andere Browser. Bei Verwendung des sRGB-Farbraums ist dies ein großartiger Farbraum, in dem Sie mit der Arbeit beginnen können, wenn Sie Stile in einen höheren dynamischen Bereich verschieben.

Vorteile

• Hervorragender Support – gilt als Basis für HDR-Displays.
• 50% mehr Farben als bei sRGB
• Die Entwicklertools bieten eine hervorragende Farbauswahl.

Nachteile

• Wird in Zukunft von Rec2020- und CIE-Bereichen übertroffen.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Rec2020 ist Teil der Bewegung für UHDTV (Ultra-HD-Fernsehen), die eine große Farbpalette für die Verwendung in 4K- und 8K-Medien bietet. Rec2020 ist ein weiterer RGB-basierter Farbraum, der größer ist als Display-p3, aber nicht annähernd so häufig von Nutzern verwendet wird wie Display P3.

Vorteile

• Ultra-HD-Farben.

Nachteile

• Bei den Verbrauchern (noch) nicht so üblich.
• Nicht häufig in Handhelds oder Tablets zu finden.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB {#a98-rgb}

A98 RGB wurde von Adobe entwickelt und enthält die meisten Farben, die mit CMYK-Druckern möglich sind. Es bietet mehr Farben als sRGB, insbesondere in Cyan und Grün.

Vorteile

• Größer als die sRGB- und Display P3-Farbräume.

Nachteile

• Dies ist kein üblicher Bereich, in dem digitale Designschaffende arbeiten.
• Nur wenige Leute übertragen Farbvorlagen aus CMYK.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

Pro Photo (RGB)

Dieser von Kodak erstellte breite Farbraum bietet einen einzigartigen Farbraum mit sehr vielen Primärfarben und minimale Farbtonverschiebungen bei einer Änderung der Helligkeit. Es soll außerdem 100% der realen Oberflächenfarben abdecken, wie von Michael Pointer aus dem Jahr 1980 dokumentiert.

Vorteile

• Minimale Farbtonänderungen beim Ändern der Helligkeit.
• Kräftige Primärfarben.

Nachteile

• Etwa 13% der angebotenen Farben sind imaginär, was bedeutet, dass sie nicht Teil des für Menschen sichtbaren Spektrums liegen.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-d50, XYZ-d65

Der CIE-XYZ-Farbraum umfasst alle Farben, die für eine Person mit durchschnittlichem Sehvermögen sichtbar sind. Daher wird sie als Standardreferenz für andere Farbräume verwendet. Y steht für die Leuchtdichte, X und Z sind mögliche Chromen innerhalb der gegebenen Leuchtdichte Y.

Der Unterschied zwischen d50 und d65 ist der Weißpunkt, wobei d50 die d50-Weißpunkte und d65 den d65-Weißpunkt verwendet.

Schlüsselbegriff: Weißpunkt ist ein Attribut eines Farbraums. Hier befindet sich echtes Weiß im Raum. Bei elektronischen Bildschirmen ist D65 der gängigste Weißpunkt mit 6.500 Kelvin. Es ist wichtig, dass die Weißpunkte bei der Farbkonvertierung übereinstimmen, damit die Farbtemperatur (Wärme oder Kühlheit) nicht beeinflusst wird.

Vorteile

• Der Zugriff auf lineares Licht bietet praktische Anwendungsfälle.
• Ideal für das Mischen von physischen Farben.

Nachteile

• Nicht wahrnehmbar linear wie lch, oklch, Lab und Oklab.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

Benutzerdefinierte Farbräume

Die CSS Color 5-Spezifikation enthält auch einen Pfad zum Erklären eines benutzerdefinierten Farbraums für den Browser. Dies ist ein ICC-Profil, das dem Browser mitteilt, wie Farben aufgelöst werden sollen.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Nach dem Laden können Sie mit der Funktion color() auf die Farben aus diesem benutzerdefinierten Profil zugreifen und die Kanalwerte dafür angeben.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Farbinterpolation

Der Übergang von einer Farbe zu einer anderen wird durch Animationen, Farbverläufe und Farbmischungen unterstützt. Dieser Übergang wird normalerweise als Ausgangs- und Endfarbe angegeben, wobei vom Browser erwartet wird, dass sie zwischen ihnen interpoliert. „Interpolieren“ bedeutet in diesem Fall, dass eine Reihe von Farben generiert wird, um einen weichen Übergang zu erzeugen.

Bei einem Farbverlauf ist die Interpolation eine Reihe von Farben entlang einer Form. Bei einer Animation ist es eine Reihe von Farben im Zeitverlauf.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

Bei einem Farbverlauf werden die Farben dazwischen auf einmal angezeigt:

Neuerungen bei der Farbinterpolation

Durch neue Gamuts und Farbräume wurden neue Optionen für die Interpolation hinzugefügt. Wenn die Farbe in hsl von Blau zu Weiß übergeht, unterscheidet sich dies stark von sRGB.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

Was passiert dann, wenn Sie von einer Farbe in einem Raum zu einer Farbe in einem ganz anderen Raum übergehen:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

Glücklicherweise enthält die Spezifikation Color 4 für die Browser Anweisungen zum Umgang mit diesen Interpolationen von unterschiedlichen Farbräumen. Bei .gradient bemerken Browser die unterschiedlichen Farbräume und verwenden den Standardfarbraum oklab.

Vielleicht denken Sie, der Browser würde lch als Farbraum verwenden, da dies die erste Farbe ist. Das ist aber nicht der Fall. Deshalb zeige ich einen zweiten Vergleichsverlauf .lch an. Der Farbverlauf .lch ist ein Farbverlauf aus dem lch-Farbraum.

Weniger Streifen dank 16-Bit-Farben

Zuvor wurden alle Farben in einer 32-Bit-Ganzzahl gespeichert, die alle vier Kanäle darstellt: Rot, Grün, Blau und Alpha. Dies sind 8 Bit pro Kanal und 2^ 24 mögliche Farben (ohne Berücksichtigung von Alpha). 2 ^ 24 = 16.777.216, "Millionen von Farben".

Nach dieser Farbarbeit vier 16-Bit-Gleitkommawerte, hat jeder Kanal einen eigenen Gleitkommawert, anstatt ineinander geworfen zu werden. Insgesamt sind dies 64 Bit, was zu viel mehr als Millionen Farben führt.

Dies ist für die Unterstützung von HD-Farben erforderlich. Dadurch können mehr Farbinformationen gespeichert werden, was den Vorteil hat, dass der Browser mehr Farben für den Farbverlauf verwenden kann.

Farbverlaufs-Streifen sind zu erkennen, wenn nicht genügend Farben für einen glatten Farbverlauf vorhanden sind und „Farbstreifen“ sichtbar werden. Durch ein Upgrade auf Farben mit höherer Auflösung wird Streifenbildung stark reduziert.

Interpolation steuern

Die kürzeste Entfernung zwischen zwei Punkten ist immer eine gerade Linie. Bei der Farbinterpolation verwenden Browser standardmäßig die kurze Route. Stellen Sie sich ein Szenario vor, bei dem es zwei Punkte in einem HSL-Farbzylinder gibt. Ein Farbverlauf erhält seine Farbstufen, indem er sich entlang der Linie zwischen den beiden Punkten bewegt.

linear-gradient(to right, #94e99c, #e06242)

Die obige Farbverlaufslinie verläuft direkt zwischen der grünlichen und der rötlichen Farbe und verläuft durch die Mitte des Farbraums. Das obige Beispiel ist zwar hilfreich, um Ihnen ein erstes Verständnis zu vermitteln, es ist aber nicht immer das, was passiert. Hier sehen Sie den Farbverlauf im folgenden Codepen. Er ist eindeutig nicht in der Mitte weiß, wie in der Beispiel-Demo gezeigt.

Der mittlere Bereich des Farbverlaufs hat jedoch seine Lebendigkeit verloren. Das liegt daran, dass sich die leuchtendsten Farben am Rand der Farbraumform befinden und nicht in der Mitte, in der sich die Interpolation nahegelegt hat. Dies wird im Allgemeinen als tote Zone bezeichnet. Es gibt verschiedene Möglichkeiten, dieses Problem zu beheben.

Festlegen von mehr Gradientenstopps, um die Totzone zu vermeiden

Eine Technik, um die Totzone zu vermeiden, besteht heute darin, dem Farbverlauf zusätzliche Farbstopps hinzuzufügen, die die Interpolation bewusst so steuern, dass sie innerhalb der lebendigen Bereiche eines Farbraums bleibt. Dies ist im wahrsten Sinne eine Problemumgehung, da die zusätzlichen Zwischenstopps dazu beitragen, die Totzone zu umgehen.

Es gibt ein von Erik Kennedy entwickeltes Farbverlauf-Tool, mit dem zusätzliche Farbstopps für Sie berechnet werden können, damit Sie die tote Zone auch in Farbräumen vermeiden können, die dazu neigen. Wenn damit dieselben Farben aus dem ersten Beispiel übergeben, aber die Farbinterpolation in HSL geändert wird, ergibt sich Folgendes:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

Bei geführten Stopppunkten ist die Interpolation keine gerade Linie mehr, sondern scheint sich um die Totezone zu krümmen, wodurch die Sättigung erhalten bleibt, was zu einem viel lebhafteren Farbverlauf führt.

Das Tool funktioniert gut, aber was wäre, wenn Sie direkt in CSS eine ähnliche oder mehr Kontrolle haben könnten?

Farbinterpolation steuern

In Farbe 4 wurde die Möglichkeit hinzugefügt, die Strategie Farbtoninterpolation zu steuern. Dies ist eine neue Möglichkeit, die Totzone zu umgehen. Denken Sie an einen Farbtonwinkel und einen Farbverlauf mit zwei Stopps, der nur den Winkel ändert und beispielsweise von 140deg nach 240deg verschiebt.

Kürzere und längere Farbinterpolation

Der Farbverlauf verwendet standardmäßig die shorter-Route, sofern Sie nicht angeben, dass die longer-Route verwendet werden soll. Farbton-Interpolationsoptionen steuern die Winkeldrehung, z. B. dass jemand nach links statt rechts drehen soll (heh, Zoolander):

Im Beispiel der Farbinterpolation werden der kurze und der lange Pfad simuliert, um den Unterschied zu veranschaulichen. Die kurze Strecke hat weniger Farbtöne, da sie so wenig wie möglich zurückgelegt wird.

Zunehmende und abnehmende Farbinterpolation

In Farbe 4 gibt es zwei weitere Strategien zur Farbinterpolation, die sich jedoch ausschließlich für zylindrische Farbräume eignen. Behalten Sie die beiden Farben aus den vorherigen Beispielen bei und zeigt die Grafik nun, wie Erhöhen und Verringern funktionieren.

Der obige Codepen verwendete ColorJS, um das erwartete Ergebnis zu demonstrieren. Um den gleichen Effekt ohne JavaScript-Bibliothek zu erzielen, würden Sie den folgenden CSS-Code schreiben:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

Zum Beenden der Farbinterpolation können Sie den Farbton zwischen zwei Farbstopps ändern und sehen, wie sich die Farbinterpolation auswirkt und wie Farbräume die Farbverlaufsergebnisse verändern. Die Effekte können sehr unterschiedlich sein. Betrachten Sie das als vier neue Tricks in Ihrem Farbwerkzeuggürtel.

Farbverläufe in verschiedenen Farbräumen

Jeder Farbraum führt aufgrund seiner eindeutigen Form und Farbanordnung zu einem anderen Farbverlauf. Sehen Sie sich in den folgenden Beispielen an, wie dies in jedem Farbraum unterschiedlich gehandhabt wird, insbesondere von Blau zu Weiß. Beachten Sie, wie viele in der Mitte lila werden. Dies wird als Farbtonverschiebung während der Interpolation bezeichnet.

Einige Farbverläufe in diesen Bereichen sind lebhafter als andere oder passieren weniger tote Zonen. Bereiche wie lab fassen Farben so zusammen, dass sie für die Sättigung optimiert sind, im Gegensatz zu Bereichen, in denen Menschen Farben in hwb() schreiben können.

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

Die obige Demo zeigt zwar subtile Ergebnisse, zeigt aber eine konsistentere Interpolation mit dem Lab. Die Syntax von Lab ist nicht einfach zu lesen. Es gibt negative Zahlen, die von rgb oder hsl noch nicht vertraut sind. Gute Neuigkeiten: Wir können hwb für eine vertraute Syntax verwenden, aber darum bitten, dass der Farbverlauf vollständig in einem anderen Farbraum wie Oklab interpoliert wird.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

In diesem Beispiel werden die gleichen Farben in HWB verwendet, aber es wird der Farbraum für die Interpolation in HWB oder Oklab angegeben. hwb ist ein großartiger Farbraum für dynamische, aber mögliche tote Zonen oder helle Flecken (siehe oben den Cyan-Hotspot). Oklab eignet sich hervorragend für wahrnehmlich lineare Farbverläufe, die gesättigt bleiben. Diese Funktion macht viel Spaß, da Sie verschiedene Farbräume ausprobieren können, um zu sehen, welchen Farbverlauf Ihnen am besten gefällt.

Hier ist ein Codepen, der mit Farbverläufen und Farbräumen sowie mit Misch- und Abgleichsstrategien experimentiert, um die Möglichkeiten zu erkunden. Sogar der Übergang von Schwarz zu Weiß ist in jedem Farbraum anders!

Gamut Clamping

Es gibt Szenarien, in denen eine Farbe etwas außerhalb eines Umfangs verlangt. Betrachten Sie die folgende Farbe:

rgb(300 255 255)

Das Maximum für einen Farbkanal im Farbraum rgb beträgt 255, aber hier wurde 300 für Rot angegeben. Was ändert sich? Gamut Clamping.

Bei der Einschränkung werden zusätzliche Informationen einfach entfernt. 300 wird innerhalb der Farb-Engine zu 255. Die Farbe wurde nun innerhalb des Raums fixiert.

Farbraum auswählen

Nachdem sie diese Farbräume und ihre Effekte kennengelernt haben, fühlen sich viele überfordert und möchten wissen, welchen Farbraum sie wählen sollen. Nach meinem Studium und meiner Erfahrung sehe ich für alle meine Aufgaben nicht den einen Farbraum. Jeder hat Momente, in denen das gewünschte Ergebnis erzielt wird.

Wenn es einen besten Bereich gäbe, gäbe es nicht so viele neue Gruppenbereiche.

Ich kann jedoch sagen, dass die CIE-Bereiche – lab, oklab, lch und oklch – meine Ausgangspunkte sind. Wenn das Ergebnis nicht das ist, was ich erwarte, teste ich andere Räume. Zum Mischen von Farben und Erstellen von Farbverläufen stimme ich der Standardspezifikation oklab zu. Was Farbsysteme und die allgemeinen Farben der Benutzeroberfläche angeht, gefällt mir oklch.

Hier sind ein paar Artikel, in denen Leute ihre aktualisierten Farbstrategien angesichts dieser neuen Farbräume und Funktionen vorgestellt haben. Beispiel: Andrey Sitnik hat alles in oklch aufgenommen. Vielleicht werden sie Sie davon überzeugen, dasselbe zu tun:

1. OKLCH in CSS: warum wir von RGB und HSL gewechselt haben von Andrey Sitnik
2. Color Formats von Josh W. Comeau
3. OK, OKLCH von Chris Coyier

Nächste Schritte

Nachdem Sie nun mit den neuen Farbräumen und Tools vertraut sind, können Sie zur Farbwiedergabe in HD migrieren.

Mehr Dynamik, einheitliche Änderungen und Interpolationen sowie eine insgesamt farbenfrohere Erfahrung für die Nutzer.

Weitere Informationen finden Sie im Leitfaden zu Farbressourcen.