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 Farben. Im folgenden Codepen werden alle neuen und alten Farbsyntaxen zusammen angezeigt:

Zusammenfassung klassischer Farbräume

Die Spezifikation der 4. Ebene führte 12 neue Farbräume für die Farbsuche ein, im Vergleich zu den zuvor veröffentlichten 7 neuen Farbräumen:

• sRGB Linear
• LCH
• okLCH
• LAB
• okLAB
• Display p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

Neue Web-Farbräume

Die folgenden Farbräume bieten Zugriff auf größere Farbräume als sRGB. Der Display-P3-Farbraum bietet fast doppelt so viele Farben wie RGB, während Rec 2020 fast doppelt so viele Farben wie Display-P3 bietet. Das sind viele Farben!

Die color()-Funktion

Browser Support

• 111
• 111
• 113
• 15

Source

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

Viele der neuen Farbräume verwenden diese Funktion, da sich die Liste der spezialisierten Funktionen wie rgb, srgb, hsl, hwb usw. immer länger wurde. Es ist einfacher, den Farbraum als Parameter zu verwenden.

Vorteile

• Ein normalisierter Bereich für den Zugriff auf Farbräume, die RGB-Kanäle verwenden.
• Kann auf jeden RGB-basierten Farbraum mit großem Farbumfang 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);
}

Hinweis:Farben können sRGB Gamut, Display P3 Gamut oder Rec2020 Gamut sein, also bis zu 77,6% des sichtbaren Spektrums.

sRGB über „color()“

Dieser Farbraum bietet dieselben Funktionen wie rgb(). Außerdem werden Dezimalwerte zwischen 0 und 1 unterstützt, die genau wie 0% bis 100 % verwendet werden.

Vorteile

• Fast alle Displays unterstützen den Bereich dieses Farbraums.
• Unterstützung für Designtools

Nachteile

• Sie sind nicht wahrnehmbar linear (wie lch()).
• Keine Farben mit breitem Farbraum.
• Farbverläufe gehen oft durch eine Totzone.

.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 eine vorhersehbare Kanalintensität.

Vorteile

• Direkter Zugriff auf RGB-Kanäle, praktisch für Dinge wie Game-Engines oder Lichtshows.

Nachteile

• Nicht wahrnehmbar linear.
• Schwarz und Weiß werden an den Rändern angeordnet.

.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);
}

Gradienten werden später ausführlich behandelt. Im Folgenden sehen Sie aber schon einmal einen srgb- und einen linear-srgb-Gradienten von Schwarz nach Weiß, um die Unterschiede zu veranschaulichen:

LCH

Browser Support

• 111
• 111
• 113
• 15

Source

LCH führt eine Syntax ein, mit der auf Farben außerhalb des RGB-Gamuts zugegriffen werden kann. Außerdem ist es das erste Programm, mit dem sich ganz einfach Farben außerhalb des Farbraums für ein Display erstellen lassen. Das liegt daran, dass alle CIE-Farben (lch, oklch, lab, oklab) das gesamte für den Menschen sichtbare Farbspektrum darstellen können.

Dieser Farbraum ist dem menschlichen Sehen nachempfunden und bietet eine Syntax, mit der sich diese und weitere Farben angeben lassen. Die LCH-Kanäle sind Helligkeit, Farbton und Chroma. Der Farbton ist ein Winkel, wie in HSL und HWB. Die Helligkeit ist ein Wert zwischen 0 und 100. Es ist eine spezielle, „wahrnehmungslineare“, menschenorientierte Leichtigkeit. Die Chroma-Information ist der Sättigung ähnlich. Sie kann zwischen 0 und 230 liegen, ist aber technisch gesehen unbegrenzt.

Vorteile

• Vorhersehbare Farbmanipulation, da das System größtenteils wahrnehmungslinear ist (siehe oklch).
• Vertraute Kanäle werden verwendet.
• Häufig mit leuchtenden Farbverläufen.

Nachteile

• Es ist leicht, den Farbraum zu überschreiten.
• In seltenen Fällen muss der Verlauf möglicherweise an einem mittleren Punkt angepasst werden, um einen Farbtonwechsel 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);
}

Achtung :Mit Chroma können Autoren den Farbraum eines Displays ganz einfach überschreiten. Seien Sie bei hohen Chroma-Werten für C vorsichtig.

LAB

Browser Support

• 111
• 111
• 113
• 15

Source

Ein weiterer Farbraum, der für den Zugriff auf den CIE-Gamut entwickelt wurde, ebenfalls mit einer wahrnehmungslinearen Helligkeitsdimension (L). A und B in LAB stehen für die einzigartigen Achsen des menschlichen Farbsehens: Rot-Grün und Blau-Gelb. Wenn A einen positiven Wert hat, wird Rot hinzugefügt. Ist der Wert unter 0, wird Grün hinzugefügt. Wenn B eine positive Zahl hat, wird Gelb hinzugefügt, während negative Werte zu Blau führen.

Vorteile

• Wahrnehmungskonsistente Farbverläufe
• High Dynamic Range.

Nachteile

• Es besteht die Gefahr einer Farbtonverschiebung.
• Es ist schwierig, beim Lesen von Werten eine Farbe zuzuordnen oder 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

Browser Support

• 111
• 111
• 113
• 15.4

Source

Dieser Farbraum ist ein Korrekturraum für LCH. Wie bei LCH steht (L) weiterhin für die wahrgenommene lineare Helligkeit, C für die Farbsättigung und H für den Farbton.

Dieser Bereich ist Ihnen vielleicht schon bekannt, wenn Sie schon einmal mit HSL oder LCH gearbeitet haben. Wählen Sie einen Winkel auf dem Farbkreis für H aus und passen Sie L an, um die Helligkeit oder Dunkelheit festzulegen. Wir haben dann aber Chroma statt Sättigung. Sie sind ziemlich identisch, mit der Ausnahme, dass Anpassungen an Helligkeit und Farbsättigung in der Regel paarweise erfolgen. Andernfalls kann es leicht passieren, dass Farben mit hoher Farbsättigung angefordert werden, die außerhalb des Zielbereichs liegen.

Vorteile

• Bei der Arbeit mit Blau- und Lilatönen gibt es keine Überraschungen.
• Perzeptuell lineare Helligkeit.
• Vertraute Kanäle werden verwendet.
• High Dynamic Range.
• Bietet eine moderne Farbpalette von Evil Martians.

Nachteile

• Es ist leicht, den Farbraum zu überschreiten.
• Neu und relativ unerforscht.
• Wenig Farbauswahlmöglichkeiten

.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

Browser Support

• 111
• 111
• 113
• 15.4

Source

Dieser Bereich ist eine Korrektur für LAB. Außerdem wird behauptet, dass der Farbraum für die Bildverarbeitung optimiert ist. Für uns in CSS bedeutet das, dass Verläufe und Farbfunktionen möglichst fehlerfrei verarbeitet werden.

Vorteile

• Standardbereich für Animationen und Interpolationen.
• Perzeptuell lineare Helligkeit.
• Keine Farbtonverschiebung wie bei LAB.
• Wahrnehmungskonsistente Farbverläufe

Nachteile

• Neu und relativ unerforscht.
• Wenig Farbauswahlmöglichkeiten

.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

Browser Support

• 111
• 111
• 113
• 15

Source

Hinweis:Die Farben befinden sich im Display P3 Gamut, also in 45,5% des sichtbaren Spektrums.

Der Display-P3-Farbraum ist seit 2015, als Apple ihn auf seinem iMac unterstützte, immer beliebter geworden. Außerdem unterstützt Apple Display-P3 seit 2016 auf Webseiten über CSS, was fünf Jahre vor jedem anderen Browser der Fall war. Wenn Sie bisher mit sRGB gearbeitet haben, ist dies ein guter Ausgangspunkt, um mit einem höheren Dynamikbereich zu arbeiten.

Vorteile

• Hervorragende Unterstützung, gilt als Standard für HDR-Displays.
• 50% mehr Farben als sRGB.
• Die DevTools bieten eine hervorragende Farbauswahl.

Nachteile

• Wird schließlich von Rec2020 und CIE-Farbräumen abgelöst.

.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

Browser Support

• 111
• 111
• 113
• 15

Source

Hinweis:Die Farben liegen im Rec2020 Gamut, also in 77,6% des sichtbaren Spektrums.

Rec2020 ist Teil der Entwicklung hin zu UHDTV (Ultra High Definition Television) und bietet eine breite Palette von Farben für die Verwendung in 4K- und 8K-Medien. Rec2020 ist ein weiterer RGB-basierter Farbraum, der größer als Display-P3 ist, aber bei Verbrauchern bei weitem nicht so verbreitet ist wie Display-P3.

Vorteile

• Ultra-HD-Farben

Nachteile

• Noch nicht so weit verbreitet.
• Nicht häufig bei Smartphones 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}

Browser Support

• 111
• 111
• 113
• 15

Source

Hinweis: Die Farben liegen im RGB 98 Gamut, also in 52,1% des sichtbaren Spektrums.

A98 RGB ist eine Abkürzung für „Adobe 1998 RGB“. Es wurde von Adobe entwickelt, um die meisten Farben zu erzielen, die mit CMYK-Druckern möglich sind. Er bietet mehr Farben als sRGB, insbesondere in den Cyan- und Grüntönen.

Vorteile

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

Nachteile

• Nicht ein Bereich, in dem digitale Designer häufig arbeiten.
• Nicht viele Leute portieren Paletten 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);
}

ProPhoto RGB

Browser Support

• 111
• 111
• 113
• 15

Source

Hinweis: Die Farben liegen im ProPhoto Gamut, also in 90% des sichtbaren Spektrums.

Dieser von Kodak entwickelte Farbraum bietet auf einzigartige Weise Primärfarben mit einem extrem breiten Farbumfang und nur minimale Farbtonverschiebungen bei der Änderung der Helligkeit. Außerdem soll er 100% der realen Oberflächenfarben abdecken, die Michael Pointer 1980 dokumentiert hat.

Vorteile

• Beim Ändern der Helligkeit kommt es nur zu minimalen Farbtonverschiebungen.
• Kräftige Primärfarben

Nachteile

• Etwa 13% der angebotenen Farben sind imaginär, d. h., sie liegen nicht im für Menschen sichtbaren Spektrum.

.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

Browser Support

• 111
• 111
• 113
• 15

Source

Hinweis:Die Farben liegen im HVS Gamut, also im 100% des für Menschen sichtbaren Spektrums.

Der CIE XYZ-Farbraum umfasst alle Farben, die für eine Person mit durchschnittlichem Sehvermögen sichtbar sind. Deshalb wird es als Standardreferenz für andere Farbräume verwendet. Y ist die Leuchtkraft, X und Z sind mögliche Farbwerte innerhalb der angegebenen Y-Leuchtkraft.

Der Unterschied zwischen d50 und d65 ist der Weißpunkt. Bei d50 wird der Weißpunkt d50 verwendet, bei d65 der Weißpunkt d65.

Schlüsselbegriff: Der Weißpunkt ist ein Attribut eines Farbraums. Dort befindet sich das „echte Weiß“ im Farbraum. Für elektronische Bildschirme ist D65 der gängigste Weißpunkt. D65 steht für 6.500 Kelvin. Bei der Farbkonvertierung ist es wichtig, dass die Weißpunkte übereinstimmen, damit die Farbtemperatur (Warm- oder Kaltton) nicht beeinträchtigt wird.

Vorteile

• Der lineare Zugriff bietet praktische Anwendungsfälle.
• Ideal für die physische Farbmischung.

Nachteile

• Nicht wahrnehmungslinear 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, über den dem Browser ein benutzerdefinierter Farbraum beigebracht werden kann. Dies ist ein ICC-Profil, das dem Browser mitteilt, wie Farben zu lösen sind.

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

Rufe nach dem Laden die Farben aus diesem benutzerdefinierten Profil mit der Funktion color() auf und gib die Kanalwerte dafür an.

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

Farbinterpolation

Der Übergang von einer Farbe zu einer anderen findet sich in Animationen, Farbverläufen und der Farbmischung. Dieser Übergang wird in der Regel als Start- und Endfarbe angegeben, wobei der Browser zwischen ihnen interpolieren soll. In diesem Fall bedeutet Interpolieren, eine Reihe von Zwischenfarben zu generieren, um einen fließenden Übergang statt eines sofortigen Übergangs zu schaffen.

Bei einem Farbverlauf besteht die Interpolation aus einer Reihe von Farben entlang einer Form. Bei einer Animation werden mehrere Farben im Zeitverlauf verwendet.

@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 alle Zwischenfarben gleichzeitig angezeigt:

Neuerungen bei der Farbinterpolation

Durch die neuen Farbräume und Farbräume gibt es zusätzliche Optionen für die Interpolation. Die Farbübergang von in hsl von Blau zu Weiß sieht in ProPhoto RGB ganz anders aus als in 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, wenn Sie von einer Farbe in einem Raum zu einer Farbe in einem völlig anderen Raum wechseln?

.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 Color 4-Spezifikation eine Anleitung für die Browser zum Umgang mit diesen interpolatorischen Farbraumübergängen. Bei .gradient erkennen Browser die unterschiedlichen Farbräume und verwenden den Standardfarbraum oklab.

Sie könnten annehmen, dass der Browser lch als Farbraum verwendet, da dies die erste Farbe ist. Das ist jedoch nicht der Fall. Deshalb zeige ich einen zweiten Vergleichsverlauf.lch. Der .lch-Farbverlauf ist ein Farbverlauf aus dem lch-Farbraum.

Weniger Streifenbildung dank 16-Bit-Farbe

Vor dieser Farbarbeit wurden alle Farben in einer 32‑Bit-Ganzzahl gespeichert, um alle vier Kanäle (Rot, Grün, Blau und Alpha) darzustellen. Das entspricht 8 Bit pro Kanal und 2^ 24 möglichen Farben (ohne Alphakanal). 2 hoch 24 = 16.777.216, also „Millionen von Farben“.

Nach dieser Farbarbeit gibt es vier 16‑Bit-Gleitkommawerte, wobei jeder Kanal seinen eigenen Gleitkommawert hat, anstatt dass sie zusammengefasst werden. Das sind insgesamt 64 Bit Daten, was zu mehr als Millionen von Farben führt.

Diese Arbeit ist erforderlich, um HD-Farben zu unterstützen. Dadurch wird die Menge der gespeicherten Farbinformationen erhöht. Das hat den angenehmen Nebeneffekt, dass der Browser mehr Farben in einem Farbverlauf verwenden kann.

Farbverläufe mit Streifen entstehen, wenn nicht genügend Farben für einen fließenden Farbverlauf vorhanden sind und Farbstreifen sichtbar werden. Durch die Umstellung auf eine höhere Farbauflösung wird das Banding stark reduziert.

Bildquelle

Interpolation steuern

Die kürzeste Entfernung zwischen zwei Punkten ist immer eine Gerade. Bei der Farbinterpolation wählen Browser standardmäßig den kürzesten Weg. Stellen Sie sich ein Szenario vor, in dem sich zwei Punkte in einem HSL-Farbkreis befinden. Die Farbschritte eines Farbverlaufs werden durch das Durchlaufen der Linie zwischen den beiden Punkten bestimmt.

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

(Mock-Demonstration)
Draufsicht auf einen HSL-Zylinder mit einer Linie zwischen den Farbstopps

Die obige Farbverlaufslinie verläuft gerade zwischen der grünlichen und der rötlichen Farbe und durch die Mitte des Farbraums. Das oben Gesagte ist zwar hilfreich, um sich ein erstes Bild zu machen, entspricht aber nicht genau dem, was passiert. Hier ist der Farbverlauf im folgenden Codepen. Er ist in der Mitte eindeutig nicht weiß, wie in der Mockup-Demonstration gezeigt.

Der mittlere Bereich des Farbverlaufs hat jedoch an Farbbrillianz verloren. Das liegt daran, dass die stärksten Farben am Rand der Farbraumform und nicht in der Mitte liegen, in der die Interpolation stattgefunden hat. Dieser Bereich wird häufig als Totzone bezeichnet. Es gibt mehrere Möglichkeiten, dieses Problem zu beheben oder zu umgehen.

Mehr Farbübergänge festlegen, um die Zone ohne Farbverlauf zu vermeiden

Eine Möglichkeit, die Totzone zu vermeiden, besteht darin, dem Farbverlauf zusätzliche Farbstopps hinzuzufügen, die die Interpolation so steuern, dass sie innerhalb der leuchtenden Bereiche eines Farbraums bleibt. Es ist buchstäblich eine Problemumgehung, da die zusätzlichen Haltestellen dazu beitragen, die Totzone zu umgehen.

Erik Kennedy hat ein Tool für Farbverläufe entwickelt, mit dem zusätzliche Farbstufen berechnet werden, damit Sie die Totzone auch in Farbräumen vermeiden können, die dazu neigen, sich dorthin zu bewegen. Wenn wir dieselben Farben wie im ersten Beispiel übergeben, aber die Farbinterpolation in HSL ändern, erhalten wir Folgendes:

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

(Mock-Demonstration)
Draufsicht auf einen HSL-Zylinder mit einer gekrümmten Linie mit 9 Farbstopps

Bei gesteuerten Endpunkten verläuft die Interpolation nicht mehr in einer geraden Linie, sondern scheint sich um die Totzone zu winden. Dadurch wird die Sättigung beibehalten, was zu einem viel lebendigeren Farbverlauf führt.

Das Tool ist zwar sehr hilfreich, aber was wäre, wenn Sie direkt über CSS ähnliche oder sogar mehr Kontrolle hätten?

Farbinterpolation steuern

In Color 4 wurde die Möglichkeit hinzugefügt, die Strategie für die Farbtoninterpolation zu steuern. Dies ist eine neue Möglichkeit, die Deadzone zu umgehen (:wink:). Denken Sie an einen Farbtonwinkel und an einen zweistufigen Farbverlauf, bei dem nur der Winkel geändert wird, z. B. von 140deg zu 240deg.

Kürzerer oder längerer Farbton-Interpolationsabstand

Der Farbverlauf verwendet standardmäßig die Route shorter, sofern Sie nicht angeben, dass die Route longer verwendet werden soll. Mit den Optionen für die Farbtoninterpolation wird die Drehung des Winkels gesteuert, ähnlich wie wenn jemand angewiesen wird, nach links statt nach rechts zu drehen (wie in Zoolander):

Im Beispiel für die Farbtoninterpolationsabstände werden der kurze und der lange Pfad simuliert, um den Unterschied zu veranschaulichen. Zwischen der kurzen Entfernung liegen weniger Farbtöne, da sie die kürzeste Strecke zurückgelegt hat. Bei der langen Entfernung wurden mehr Farbtöne durchlaufen.

Steigende oder sinkende Farbtoninterpolation

In Color 4 gibt es zwei weitere Strategien zur Farbtoninterpolation, die jedoch ausschließlich für zylindrische Farbräume gelten. Anhand der beiden Farben aus den vorherigen Beispielen wird jetzt gezeigt, wie das Erhöhen und Verringern funktioniert.

Im Codepen oben wurde ColorJS verwendet, um das erwartete Ergebnis zu demonstrieren. Das CSS, das Sie schreiben würden, um denselben Effekt ohne JavaScript-Bibliothek zu erzielen, würde so aussehen:

.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 Abschluss noch ein praktisches Tool, mit dem Sie den Farbton zwischen zwei Farbstopps ändern und die Auswirkungen einer Auswahl für die Farbtoninterpolation sowie die Auswirkungen von Farbräumen auf die Ergebnisse von Farbverläufen sehen können. Die Auswirkungen können sehr unterschiedlich sein. Betrachten Sie diese vier neuen Tricks als vier neue Tools in Ihrem Farbkoffer.

Farbverläufe in verschiedenen Farbräumen

Aufgrund der jeweiligen Form und Farbanordnung führt jeder Farbraum zu einer anderen Farbabstufung. In den folgenden Beispielen sehen Sie, wie die einzelnen Farbräume damit umgehen, insbesondere bei Blau und Weiß. Beachten Sie, wie viele in der Mitte lila werden. Das wird als Farbtonänderung bei der Interpolation bezeichnet.

Einige Farbverläufe in diesen Bereichen sind satter als andere oder durchlaufen weniger tote Zonen. In Bereichen wie lab werden Farben auf eine für die Sättigung optimierte Weise angeordnet, im Gegensatz zu Bereichen wie hwb(), die für die Eingabe von Farben durch Menschen optimiert sind.

.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));
}

In der obigen Demo ist die Interpolation mit dem Lab zwar nur unwesentlich konsistenter, aber dennoch deutlich zu erkennen. Die Syntax von LAB ist jedoch nicht einfach zu lesen. Es gibt negative Zahlen, die für Nutzer von RGB oder HSL sehr ungewohnt sind. Glücklicherweise können wir hwb für eine vertraute Syntax verwenden, aber angeben, dass der Farbverlauf vollständig in einem anderen Farbraum interpoliert werden soll, z. B. oklab.

.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 dieselben Farben in hwb verwendet, aber der Farbraum für die Interpolation wird entweder als hwb oder oklab angegeben. hwb ist ein hervorragender Farbraum für eine hohe Farbsättigung, aber es können Totzonen oder helle Flecke auftreten (siehe den cyanen Hotspot im oberen Beispiel). Oklab eignet sich hervorragend für wahrnehmungslineare Farbverläufe, die gesättigt bleiben. Diese Funktion macht viel Spaß, da Sie verschiedene Farbräume ausprobieren können, um herauszufinden, welcher Farbverlauf Ihnen am besten gefällt.

Hier ist ein Codepen, in dem mit Farbverläufen und Farbräumen experimentiert wird. Dabei werden Strategien gemischt und kombiniert, um die Möglichkeiten zu erkunden. Selbst ein Übergang von Schwarz zu Weiß ist in jedem Farbraum anders.

Farbraumbegrenzung

Es gibt Szenarien, in denen für eine Farbe etwas außerhalb eines Farbraums erforderlich ist. Betrachten Sie die folgende Farbe:

rgb(300 255 255)

Das Maximum für einen Farbkanal im rgb-Farbraum ist 255, hier wurde jedoch 300 für Rot angegeben. Was ändert sich? Gamut-Begrenzung

Bei der Begrenzung werden zusätzliche Informationen einfach entfernt. 300 wird intern in der Farbengine zu 255. Die Farbe ist jetzt auf den Bereich beschränkt.

Farbraum auswählen

Viele Menschen fühlen sich überwältigt, nachdem sie mehr über diese Farbräume und ihre Auswirkungen erfahren haben, und möchten wissen, welchen sie auswählen sollen. Aus meinen Studien und meiner Erfahrung heraus sehe ich keinen Farbraum als den einzigen für alle meine Aufgaben. Bei jedem gibt es Momente, in denen das gewünschte Ergebnis erzielt wird.

Wenn es einen einzigen optimalen Gruppenbereich gäbe, würden nicht so viele neue Gruppenbereiche eingeführt.

Ich kann jedoch sagen, dass die CIE-Farbräume lab, oklab, lch und oklch meine Ausgangspunkt sind. Wenn das Ergebnis nicht das ist, wonach ich suche, teste ich andere Gruppenbereiche. Für das Mischen von Farben und das Erstellen von Farbverläufen stimme ich der Standardspezifikation von oklab zu. Für Farbsysteme und die Farben der Benutzeroberfläche insgesamt gefällt mir oklch.

Hier sind einige Artikel, in denen Nutzer ihre aktualisierten Farbstrategien angesichts dieser neuen Farbräume und Funktionen geteilt haben. Andrey Sitnik hat beispielsweise oklch zu seinem Hauptprojekt gemacht. Vielleicht überzeugt er Sie ja, es ihm gleichzutun:

1. OKLCH in CSS: why we moved from RGB and HSL von Andrey Sitnik
2. Farbformate von Josh W. Comeau
3. OK, OKLCH von Chris Coyier

Nächste Schritte

Nachdem Sie sich mit den neuen Farbräumen und Tools vertraut gemacht haben, können Sie auf HD-Farben umstellen.

Sie bieten mehr Farbbrillanz, konsistente Manipulationen und Interpolationen und insgesamt eine lebendigere Darstellung für Ihre Nutzer.

Weitere Farbressourcen finden Sie im Leitfaden.