color()

Im Folgenden finden Sie Beschreibungen der erlaubten Werte für absolute und relative Farben.

Syntax für absolute Werte

color(colorspace c1 c2 c3[ / A])

Die Parameter sind wie folgt:

colorspace

Ein <ident>, das einen der vordefinierten Farbräume angibt: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 oder xyz-d65.

c1, c2, c3

Jeder Wert kann als <number>, <percentage> oder das Schlüsselwort none (was in diesem Fall 0 entspricht) geschrieben werden. Diese Werte repräsentieren die Komponentenwerte für den Farbraum. Bei Verwendung eines <number>-Wertes repräsentiert allgemein 0 bis 1 die Grenzen des Farbraums. Werte außerhalb dieses Bereichs sind erlaubt, werden aber außerhalb des Gamut für den gegebenen Farbraum liegen. Bei Verwendung eines Prozentwertes stellt 100% 1 und 0% 0 dar.

A Optional

Ein <alpha-value>, das den Alphakanalwert der Farbe repräsentiert, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Falls enthalten, wird der Wert mit einem Schrägstrich (/) vorangestellt.

Syntax für relative Werte

color(from <color> colorspace c1 c2 c3[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer verwendet, wenn eine relative Farbe definiert wird, gefolgt von einem <color>-Wert, der die Ursprungsfarbe darstellt. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color>-Syntax sein, einschließlich einer weiteren relativen Farbe.

colorspace

Ein <ident>, das den Farbraum der Ausgabefarbe angibt, im Allgemeinen einer der vordefinierten Farbräume: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 oder xyz-d65.

c1, c2, c3

Jeder Wert kann als <number>, <percentage> oder das Schlüsselwort none (was in diesem Fall 0 entspricht) geschrieben werden. Diese Werte repräsentieren die Komponentenwerte für die Ausgabefarbe. Bei Verwendung eines <number>-Wertes repräsentiert allgemein 0 bis 1 die Grenzen des Farbraums. Werte außerhalb dieses Bereichs sind erlaubt, werden aber außerhalb vom Gamut für den angegebenen Farbraum sein. Allgemein repräsentiert ein Prozentwert 100% 1 und 0% 0.

A Optional

Ein <alpha-value>, das den Alphakanalwert der Ausgabefarbe repräsentiert, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, übernimmt er den Alphakanalwert der Ursprungsfarbe. Falls enthalten, wird der Wert mit einem Schrägstrich (/) vorangestellt.

Definition von Ausgabekanalkomponenten für relative Farben

Bei der Verwendung der relativen Farbsyntax innerhalb einer color()-Funktion wandelt der Browser die Ursprungsfarbe in eine äquivalente Farbe im angegebenen Farbraum um (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte plus einem Alphakanalwert (alpha) definiert. Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Die drei Farbkanalwerte der Ursprungsfarbe werden zu einem <number> aufgelöst. Für vordefinierte Farbräume, je nach Angabe, werden diese Werte eine der folgenden sein:

  • r, g und b: Farbkanalwerte für die auf RGB basierenden Farbräume srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb und rec2020.

  • x, y und z: Farbkanalwerte für die auf CIE XYZ basierenden Farbräume xyz, xyz-d50 und xyz-d65.

    Hinweis: Jeder dieser Werte liegt normalerweise zwischen 0 und 1, aber wie oben beschrieben, können sie außerhalb dieser Grenzen liegen.

    Hinweis: Die Referenzierung der Werte r, g und b innerhalb einer color()-Funktion mit einem XYZ-basierten Farbraum, x, y und z-Werte innerhalb einer color()-Funktion mit einem RGB-basierten Farbraum oder anderen Zeichen ist ungültig. Die innerhalb der Funktion verfügbaren Ursprungsfarbkanalwerte müssen dem spezifizierten Typ des Farbraums entsprechen.

• alpha: Der Transparenzwert der Farbe, aufgelöst zu einem <number> zwischen 0 und 1, einschließlich.

Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Weise ausgedrückt werden. Im Folgenden untersuchen wir einige Beispiele, um dies zu veranschaulichen.

In den ersten beiden folgenden Beispielen verwenden wir die relative Farbsyntax. Das erste gibt jedoch die gleiche Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Sie würden wahrscheinlich niemals diese in einem echten Code verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Erlernen der relativen color()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (äquivalent zu red). Während Sie wahrscheinlich nie die folgenden Funktionen schreiben würden, weil sie die gleiche Farbe wie die Ursprungsfarbe ausgeben, demonstriert dies, wie die Ursprungsfarbkanalwerte als Ausgabekanäle verwendet werden:

color(from hsl(0 100% 50%) srgb r g b)
color(from hsl(0 100% 50%) xyz x y z)

Die Ausgabefarben dieser Funktionen sind color(srgb 1 0 0) und color(xyz-d65 0.412426 0.212648 0.0193173).

Die nächsten Funktionen verwenden absolute Werte für die Ausgabefarbkanalwerte und geben völlig unterschiedliche Farben aus, die nicht auf der Ursprungsfarbe basieren:

color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)
/* Computed output color: color(srgb 0.749938 0 0.609579) */

color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)
/* Computed output color: color(xyz-d65 0.75 0.6554 0.1 */

Die folgenden Funktionen verwenden zwei der Ursprungsfarbkanalwerte für die Ausgabefarbkanalwerte (r und b sowie x und y), aber verwenden einen neuen Wert für den anderen Ausgabekanalenwert (g bzw. z), wodurch in jedem Fall eine relative Farbe auf Basis der Ursprungsfarbe erzeugt wird:

color(from hsl(0 100% 50%) srgb r 1 b)
/* Computed output color: color(srgb 1 1 0) */

color(from hsl(0 100% 50%) xyz x y 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.5) */

In den bisher in diesem Abschnitt gezeigten Beispielen wurden die Alphakanäle weder für die Ursprungs- noch die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht festgelegt ist, überträgt er den gleichen Wert wie der Alphakanal der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er auf 1 gesetzt. Deshalb sind die Alpha-Kanalwerte der Ursprung- und Ausgabefarben in den obigen Beispielen 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarb-Alphakanalwerte angeben. Das erste gibt den Alphakanalwert der Ausgabe als gleich dem der Ursprungsfarbe an, während das zweite einen anderen, nicht mit dem Alphakanal der Ursprungsfarbe zusammenhängenden, Alphakanalwert angibt.

color(from hsl(0 100% 50% / 0.8) srgb r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

color(from hsl(0 100% 50% / 0.8) xyz x y z / 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.0193173 / 0.5) */

Die folgenden Beispiele verwenden calc()-Funktionen, um neue Kanalwerte für die Ausgabefarben zu berechnen, die relativ zu den Ursprungsfarbkanalwerten sind:

color(from hsl(0 100% 50%) srgb calc(r - 0.4) calc(g + 0.1) calc(b + 0.6) / calc(alpha - 0.1))
/* Computed output color: color(srgb 0.6 0.1 0.6 / 0.9)  */

color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(alpha - 0.1))
/* Computed output color: color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<colorspace-params> = 
  <custom-params>                  |
  <predefined-rgb-params>          |
  <predefined-polar-params>        |
  <predefined-rectangular-params>  |
  <xyz-params>                     

<alpha-value> = 
  <number>      |
  <percentage>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<predefined-polar-params> = 
  jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]  

<predefined-rectangular-params> = 
  <predefined-rectangular> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb            |
  srgb-linear     |
  display-p3      |
  a98-rgb         |
  prophoto-rgb    |
  rec2020         |
  rec2100-pq      |
  rec2100-hlg     |
  rec2100-linear  

<hue> = 
  <number>  |
  <angle>   

<predefined-rectangular> = 
  jzazbz  |
  ictcp   

<xyz> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Das folgende Beispiel zeigt die Wirkung der Veränderung der Werte für die Helligkeit, a-Achse und b-Achse der color() Funktion.

HTML

<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

Ergebnis

Das folgende Beispiel zeigt, wie der xyz Farbraum verwendet wird, um eine Farbe anzugeben.

HTML

<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

Ergebnis

Dieses Beispiel zeigt, wie die color-gamut Media Query verwendet wird, um die Unterstützung für einen bestimmten Farbraum zu erkennen und diesen Farbraum zu verwenden, um eine Farbe anzugeben.

HTML

<div></div>
<div></div>
<div></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 1 0 0);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 1 0 0);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 1 0 0);
  }
}

Ergebnis

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Dem mittleren wird die unveränderte --base-color gegeben, während das linke und rechte eine aufgehellte und abgedunkelte Variante dieser --base-color erhalten.

Diese Varianten werden mit relativen Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine color()-Funktion übergeben, und die Ausgabefarben haben ihre g und b Kanäle modifiziert, um den gewünschten Effekt durch calc()-Funktionen zu erzielen. Bei der aufgehellten Farbe werden 15% zu diesen Kanälen hinzugefügt, und bei der abgedunkelten Farbe werden 15% von diesen Kanälen abgezogen.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

#one {
  background-color: color(
    from var(--base-color) display-p3 r calc(g + 0.15) calc(b + 0.15)
  );
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: color(
    from var(--base-color) display-p3 r calc(g - 0.15) calc(b - 0.15)
  );
}

/* Use @supports to add in support old syntax that requires r g b values
   to be specified as percentages (with units) in calculations.
   This is required for Safari 16.4+ */
@supports (color: color(from red display-p3 r g calc(b + 30%))) {
  #one {
    background-color: color(
      from var(--base-color) display-p3 r calc(g + 15%) calc(b + 15%)
    );
  }

  #three {
    background-color: color(
      from var(--base-color) display-p3 r calc(g - 15%) calc(b - 15%)
    );
  }
}

Ergebnis

Die Ausgabe ist wie folgt:

• Der <color> Datentyp für eine Liste aller Farbnennungen
• Verwendung relativer Farben
• sRGB Farbpicker und Konvertierungswerkzeug
• CSS Farben Modul
• color-gamut Media-Feature
• Erweiterter Farbraum in CSS mit Display-p3