color() CSS-Funktion

Syntax

/* Absolute values */
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

/* Relative values */
color(from green srgb r g b / 0.5)
color(from #123456 xyz calc(x + 0.75) y calc(z - 0.35))

Werte

Nachfolgend finden Sie Beschreibungen der zulässigen Werte sowohl für absolute als auch für 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 bezeichnet: 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 (entspricht in diesem Fall 0) geschrieben werden. Diese Werte repräsentieren die Komponentenwerte für den Farbraum. Bei Verwendung eines <number>-Werts repräsentiert 0 bis 1 im Allgemeinen die Grenzen des Farbraums. Werte außerhalb dieses Bereichs sind zulässig, liegen jedoch außerhalb des Gamut für den gegebenen Farbraum. Bei Verwendung eines Prozentwerts repräsentiert 100% 1 und 0% 0.

A Optional

Ein <alpha-value>, das den Alphakanalwert der Farbe darstellt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um keinen Alphakanal explizit festzulegen. Wird der A-Kanalwert nicht ausdrücklich spezifiziert, wird er standardmäßig auf 100% gesetzt. Falls angegeben, wird der Wert durch einen 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 angegeben, 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 eine beliebige gültige <color>-Syntax sein, einschließlich einer anderen relativen Farbe.

colorspace

Ein <ident>, das den Farbraum der Ausgabefarbe bezeichnet, 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 (entspricht in diesem Fall 0) geschrieben werden. Diese Werte repräsentieren die Komponentenwerte für die Ausgabefarbe. Bei Verwendung eines <number>-Werts repräsentiert 0 bis 1 im Allgemeinen die Grenzen des Farbraums. Werte außerhalb dieses Bereichs sind zulässig, liegen jedoch außerhalb des Gamut für den gegebenen Farbraum. Im Allgemeinen repräsentiert bei Verwendung eines Prozentwerts 100% 1 und 0% 0.

A Optional

Ein <alpha-value>, das den Alphakanalwert der Ausgabefarbe darstellt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um keinen Alphakanal explizit festzulegen. Wird der A-Kanalwert nicht ausdrücklich spezifiziert, wird er standardmäßig auf den Alphakanalwert der Ursprungsfarbe gesetzt. Ist der A-Wert eingeschlossen, wird er durch einen Schrägstrich (/) vorangestellt.

Definition der Ausgabekanal-Komponenten einer relativen Farbe

Bei 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 so spezifiziert ist). Die Farbe wird als drei verschiedene Farbkanalwerte plus einem Alphakanalwert (alpha) definiert. Diese Kanalwerte sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabekanalwerte verwendet zu werden:

• Die drei Farbkanalwerte der Ursprungsfarbe werden auf eine <number> aufgelöst. Für vordefinierte Farbräume, abhängig davon, welcher angegeben ist, sind diese Werte eines der folgenden:

  • 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 CIE XYZ-basierten Farbräume xyz, xyz-d50 und xyz-d65.

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

    Hinweis: Das Referenzieren von r, g und b-Werten innerhalb einer color()-Funktion mit einem XYZ-basierten Farbraum, x, y und z-Werten innerhalb einer color()-Funktion mit einem RGB-basierten Farbraum oder anderen Zeichen ist ungültig. Die verfügbaren Ursprungs-Farbkanalwerte innerhalb der Funktion müssen mit der angegebenen Art des Farbraums übereinstimmen.

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

Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Weisen ausgedrückt werden. Nachfolgend werden wir einige Beispiele analysieren, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Allerdings gibt das erste Beispiel die gleiche Farbe wie die Ursprungsfarbe aus und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen quasi keine relativen Farben! In einem realen Codebase würden Sie diese wahrscheinlich nie verwenden und stattdessen einen absoluten Farbwert nutzen. Wir haben diese Beispiele eingebaut als Ausgangspunkt für das Lernen über die relative color()-Syntax.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht red). Während Sie die folgenden Funktionen wahrscheinlich nie schreiben würden, weil sie dieselbe Farbe wie die Ursprungsfarbe ausgeben, zeigen sie, wie Sie die Ursprungs-Farbkanalwerte als Ausgabekanalwerte verwenden:

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 folgenden Funktionen verwenden absolute Werte für die Ausgabekanalwerte, wobei völlig andere Farben erzeugt werden, 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 Ursprungs-Farbkanalwerte für die Ausgabekanalwerte (r und b, sowie x und y) und verwenden einen neuen Wert für den anderen Ausgabekanalwert (g und z), was eine relative Farbe auf Basis der Ursprungsfarbe in jedem Fall erzeugt:

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 für die Ausgabefarben ausdrücklich spezifiziert. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, wird er standardmäßig auf denselben Wert wie der Alphakanal der Ursprungsfarbe gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er standardmäßig auf 1 gesetzt. Daher sind die Ursprungs- und Ausgabefarbkanalwerte 1 für die obigen Beispiele.

Schauen wir uns nun einige Beispiele an, die die Ursprungs- und Ausgabefarbkanalwerte ausdrücklich angeben. Das erste Beispiel weist dem Ausgabefarbkanalwert denselben Wert wie dem Ursprungsalphafarbkanalwert zu, während das zweite Beispiel einen anderen Wert nicht auf Basis des Ursprungsalphafarbkanalwertes 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 Ursprungsfarbenkanalwerten 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) */

Formale Syntax

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

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

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

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

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

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

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

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

Beispiele

Verwendung vordefinierter Farbräume mit color()

Das folgende Beispiel zeigt den Effekt der Variation der Werte für 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

Verwendung des xyz-Farbraums mit color()

Das folgende Beispiel zeigt, wie man den xyz-Farbraum zur Angabe einer Farbe verwendet.

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

Verwendung von color-gamut Medienabfragen mit color()

Dieses Beispiel zeigt, wie man die color-gamut Medienabfrage zur Erkennung der Unterstützung eines bestimmten Farbraums verwendet, um diesen Farbraum zur Festlegung einer Farbe zu nutzen.

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

Verwendung relativer Farben mit color()

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während das linke und das rechte aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert – die --base-color benutzerdefinierte Eigenschaft wird in eine color()-Funktion übergeben, und die Ausgabefarben werden durch Modifizierung ihrer g- und b-Kanäle via calc()-Funktionen erzielt. Die aufgehellte Farbe hat 15% zu diesen Kanälen hinzugefügt, und die abgedunkelte Farbe hat 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

Das Ergebnis ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• color-Eigenschaft
• Der <color>-Datentyp für eine Liste aller Farbnomenklaturen
• Verwendung relativer Farben
• Tool zur Farbumwandlung
• CSS-Farbenmodul
• color-gamut Medienmerkmal
• Wide Gamut Color in CSS mit Display-p3