color()

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

Im Folgenden finden Sie Beschreibungen der zulässigen Werte für sowohl absolute als auch relative Farben.

Absolute Wertsyntax

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 als Schlüsselwort none (entspricht 0 in diesem Fall) geschrieben werden. Diese Werte repräsentieren die Komponentwerte für den Farbraum. Wenn ein <number> Wert verwendet wird, 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 sein. Bei einem Prozentwert repräsentiert 100% die 1 und 0% die 0.

A Optional

Ein <alpha-value>, der den Alpha-Kanalwert der Farbe darstellt, 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 Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird standardmäßig 100% verwendet. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wertsyntax

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 anderen relativen Farbe.

colorspace

Ein <ident>, das den Farbraum der Ausgabefarbe angibt, in der Regel 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 als Schlüsselwort none (entspricht 0 in diesem Fall) geschrieben werden. Diese Werte repräsentieren die Komponentenwerte für die Ausgabefarbe. Wenn ein <number> Wert verwendet wird, 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 sein. Im Allgemeinen, wenn ein Prozentwert verwendet wird, repräsentiert 100% die 1 und 0% die 0.

A Optional

Ein <alpha-value>, der den Alpha-Kanal der Ausgabefarbe darstellt, 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 Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird standardmäßig der Alpha-Kanalwert der Ursprungsfarbe verwendet. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition der Ausgabekanalkomponenten für relative Farben

Wenn die relative Farbsyntax innerhalb einer color() Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente Farbe im angegebenen Farbraum (falls sie nicht bereits so angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte plus einem Alpha-Kanalwert (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, abhängig von dem angegebenen, werden diese Werte eines 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, kann jedoch, wie oben erläutert, außerhalb dieser Grenzen liegen.

    Hinweis: Die Referenzierung 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 irgendwelchen anderen Zeichen ist ungültig. Die Ursprungsfarbkanalwerte, die innerhalb der Funktion verfügbar sind, müssen dem angegebenen Typ des Farbraums entsprechen.

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

Die unterschiedlichen Kanäle der Ausgabefarbe können auf verschiedene Arten ausgedrückt werden. Im Folgenden werden wir einige Beispiele untersuchen, um dies zu veranschaulichen.

In den ersten beiden Beispielen verwenden wir die relative Farbsyntax. Dennoch gibt das erste die gleiche Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen wirklich keine relativen Farben! Sie würden diese wahrscheinlich nie in einer realen Codebasis verwenden und stattdessen einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt aufgenommen, um die relative color() Syntax zu erlernen.

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

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

Die Ausgabe 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 andere 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 */

In den folgenden Funktionen werden zwei der Ursprungsfarbkanalwerte für die Ausgabefarbkanalwerte verwendet (r und b bzw. x und y), aber es wird ein neuer Wert für den anderen Ausgabekanalwert (g bzw. z) verwendet, wodurch in jedem Fall eine relative Farbe auf Basis der Ursprungsfarbe erstellt 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 gesehenen Beispielen wurden die Alphakanäle weder für die Ursprungs- noch Ausgabefarben explizit angegeben. Wenn der Ausgabefarben-Alphakanal nicht angegeben ist, wird standardmäßig derselbe Wert wie beim Ursprungsfarben-Alphakanal verwendet. Wenn der Ursprungsfarben-Alphakanal nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird standardmäßig 1 verwendet. Daher betragen die Ursprungs- und Ausgabefarben-Alphakanalwerte in den obigen Beispielen 1.

Werfen wir einen Blick auf einige Beispiele, die die Ursprungs- und Ausgabefarben-Alphakanalwerte spezifizieren. Das erste gibt den Ausgabefarben-Alphakanalwert als gleich dem Ursprungsfarben-Alphakanalwert an, während das zweite einen anderen Ausgabefarben-Alphakanalwert angibt, der nichts mit dem Ursprungsfarben-Alphakanalwert zu tun hat.

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) */

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 die Wirkung 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 verwendet, um eine Farbe zu spezifizieren.

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 Media Queries mit color()

Diese Beispiel zeigt, wie man die color-gamut Media Query verwenden kann, um die Unterstützung eines bestimmten Farbraums zu erkennen und diesen Farbraum zu verwenden, um eine Farbe zu spezifizieren.

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 stilisiert drei <div> Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linken und rechten 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 haben ihre g und b Kanäle modifiziert, um über calc() Funktionen den gewünschten Effekt zu erzielen. Die aufgehellte Farbe hat 15% zu diesen Kanälen addiert, während die abgedunkelte Farbe 15% subtrahiert hat.

<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:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• color Eigenschaft
• Der <color> Datentyp für eine Liste aller Farbnotationen
• Verwendung relativer Farben
• Color_format_converter Tool
• CSS Farben Modul
• color-gamut Media-Feature
• Wide Gamut Color in CSS with Display-p3