rgb()

Im Folgenden werden die erlaubten Werte sowohl für absolute als auch relative Farben beschrieben.

Absolute Wertsyntax

rgb(R G B[ / A])

Die Parameter sind wie folgt:

R, G, B

Jeder Wert kann als <number> zwischen 0 und 255, als <percentage> zwischen 0% und 100% oder als Schlüsselwort none (äquivalent zu 0% in diesem Fall) dargestellt werden. Diese Werte repräsentieren die Rot-, Grün- und Blau-Kanäle.

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 opak) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert 100%. Wenn eingeschlossen, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wertsyntax

rgb(from <color> R G B[ / 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 repräsentiert: Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color> Syntax enthalten, einschließlich einer weiteren relativen Farbe.

R, G, B

Jeder Wert kann als <number> zwischen 0 und 255, als <percentage> zwischen 0% und 100% oder als Schlüsselwort none (äquivalent zu 0% in diesem Fall) dargestellt werden. Diese Werte repräsentieren die Rot-, Grün- und Blau-Kanalwerte der Ausgabefarbe.

A Optional

Ein <alpha-value>, der den Alpha-Kanalwert der Ausgabefarbe darstellt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig opak) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert der Alpha-Kanalwert der Ursprungsfarbe. Wenn eingeschlossen, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definieren der Ausgabekanalkomponenten für relative Farben

Beim Verwenden relativer Farbsyntax innerhalb einer rgb()-Funktion konvertiert der Browser die Ursprungsfarbe in eine gleichwertige RGB-Farbe (wenn sie nicht bereits als solche spezifiziert ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — r (rot), g (grün) und b (blau) — plus ein Alphakanalwert (alpha). Diese Kanalwerte werden innerhalb der Funktion zur Verfügung gestellt, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Die r, g und b Werte werden jeweils in <number>-Werte zwischen 0 und 255 aufgelöst.
• Der alpha Kanal wird in einen <number> zwischen 0 und 1 aufgelöst.

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

In den ersten beiden Beispielen verwenden wir relative Farbsyntax. Das erste Beispiel gibt jedoch dieselbe Farbe aus wie die Ursprungsfarbe, und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen wirklich keine relativen Farben! Es ist unwahrscheinlich, dass Sie diese jemals in einem realen Code verwenden würden, und vermutlich würden Sie stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Erlernen der relativen rgb()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht rgb(255 0 0)). Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die r-, g- und b-Kanalwerte der Ursprungsfarbe (255, 0 und 0) als Ausgabekanalwerte:

rgb(from hsl(0 100% 50%) r g b)

Die Ausgabe dieser Funktion ist das sRGB color()-Äquivalent von rgb(255 0 0): color(srgb 1 0 0).

Die nächste Funktion verwendet absolute Werte für die Ausgabefarbkanalwerte und gibt eine völlig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

rgb(from hsl(0 100% 50%) 132 132 224)

In diesem Fall ist die Ausgabefarbe das sRGB color()-Äquivalent von rgb(132 132 224): color(srgb 0.517647 0.517647 0.878431).

Die folgende Funktion erstellt eine relative Farbe, die auf der Ursprungsfarbe basiert:

rgb(from hsl(0 100% 50%) r 80 80)

In diesem Beispiel:

• Wird die Ursprungsfarbe (hsl(0 100% 50%)) in ein rgb()-Äquivalent (rgb(255 0 0)) umgewandelt.
• Der R-Kanalwert für die Ausgabefarbe wird auf den R-Kanalwert des rgb()-Äquivalents der Ursprungsfarbe gesetzt — 255.
• Die G- und B-Kanalwerte der Ausgabefarbe werden auf neue Werte gesetzt, die nicht auf der Ursprungsfarbe basieren: 80 und 80, jeweils.

Die endgültige Ausgabefarbe ist das Äquivalent von rgb(255 80 80) im sRGB-Farbraum — color(srgb 1 0.313726 0.313726).

In den Beispielen, die wir bisher in diesem Abschnitt gesehen haben, wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit spezifiziert. Wenn der Alphakanal der Ausgabefarbe nicht spezifiziert ist, wird er standardmäßig auf denselben Wert wie der Alphakanal der Ursprungsfarbe gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht spezifiziert ist (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die alpha Kanalwert sowohl für die Ursprungs- als auch die Ausgabefarben in den oben genannten Beispielen 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarbenwerte für Alphakanäle spezifizieren. Im ersten Beispiel wird der Ausgabefarbenwert für den Alphakanal gleich dem Ursprungswert für den Alphakanal angegeben, während im zweiten Beispiel ein anderer Ausgabefarbenwert für den Alphakanal angegeben wird, der nichts mit dem Ursprungswert für den Alphakanal zu tun hat.

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

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

Im folgenden Beispiel wird die Ursprungsfarbe hsl() wiederum in eine rgb()-Darstellung konvertiert — rgb(255 0 0). calc()-Berechnungen werden auf die R-, G-, B- und A-Werte angewendet. Nach der Berechnung sind die R-, G-, B- und A-Werte 127.5, 25, 175, und 0.9. Die endgültige Ausgabefarbe ist das Äquivalent von rgb(127.5 25 175 / 0.9) im sRGB-Farbraum: color(srgb 0.5 0.0980392 0.686275 / 0.9).

rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

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

In diesem Beispiel haben wir drei <div>-Elemente mit verschiedenen Hintergrundfarben, die über einem gestreiften Hintergrund angezeigt werden.

HTML

<div>
  <div id="integer"></div>
  <div id="percent"></div>
  <div id="alpha"></div>
</div>

CSS

Die Hintergrundfarben werden mit der rgb()-Funktion festgelegt. Die drei Farben sind gleich. Die dritte ist halbtransparent, deshalb haben wir einen repeating-linear-gradient() auf dem <body> eingefügt, um die Transparenz von Alphakanälen besser zu demonstrieren.

div {
  display: flex;
  gap: 20px;
  height: 50px;
  flex: 1;
}
body {
  height: calc(100vh - 20px);
}

body {
  background: repeating-linear-gradient(-45deg, #eee 0 2px, #fff 2px 6px);
  padding: 10px;
}

#integer {
  background-color: rgb(189 85 218);
}

#percent {
  background-color: rgb(74% 33% 85%);
}

#alpha {
  background-color: rgb(189 85 218 / 0.25);
}

Ergebnis

In diesem Beispiel werden drei <div>-Elemente mit unterschiedlichen Hintergrundfarben gestylt. Das linke Element erhält die unveränderte --base-color, während die mittleren und rechten Elemente Varianten dieser --base-color erhalten, die sukzessiv mehr aus dem Rotkanal entfernen und mehr zum Blaukanal hinzufügen.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine rgb()-Funktion übergeben, und die Ausgabefarbe hat ihre Rot- und Blau-Kanäle modifiziert, um den gewünschten Effekt über calc()-Funktionen zu erzielen, während der Grünkanal unverändert bleibt.

<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;
  /* equal to rgb(255 165 0) */
}

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

#two {
  background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
  /* 76.5 is 30% of 255 */
}

#three {
  background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
  /* 153 is 60% of 255 */
}

/* Use @supports to add in support for 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: rgb(from red r g calc(b + 30%))) {
  #two {
    background-color: rgb(from var(--base-color) calc(r - 30%) g calc(b + 30%));
  }

  #three {
    background-color: rgb(from var(--base-color) calc(r - 60%) g calc(b + 60%));
  }
}

Ergebnis

Aus Legacy-Gründen akzeptiert die rgb()-Funktion ein Format, bei dem alle Werte durch Kommata getrennt werden.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 50%);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

Ergebnis

• Der <color> Datentyp für eine Liste aller Farbnotationen
• sRGB Farbpicker und Konvertierungswerkzeug
• Verwendung relativer Farben
• CSS-Farben Modul