rgb()

Nachfolgend finden Sie Beschreibungen der zulässigen Werte für absolute und relative Farben.

Absolute Wert-Syntax

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 (entspricht in diesem Fall 0%) dargestellt werden. Diese Werte repräsentieren die Rot-, Grün- und Blau-Kanäle.

A Optional

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

Relative Wert-Syntax

rgb(from <color> R G B[ / 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 repräsentiert: 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.

R, G, B

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

A Optional

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

Definition der Komponenten für die Ausgabekanäle von relativen Farben

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

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

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

In den ersten beiden Beispielen verwenden wir relative Farbsyntax. Allerdings liefert das erste Beispiel dieselbe Farbe wie die Ursprungsfarbe und das zweite Beispiel eine Farbe, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen eigentlich keine relativen Farben! Wahrscheinlich würden Sie diese in einem realen Code nicht verwenden und stattdessen einfach einen absoluten Farbwert nutzen. Wir haben diese Beispiele als Ausgangspunkt zum Lernen über die relative rgb()-Syntax aufgenommen.

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

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

Die Ausgabefarbe 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 Kanalwerte der Ausgabefarbe 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 erzeugt eine relative Farbe basierend auf der Ursprungsfarbe:

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

Dieses Beispiel:

• Konvertiert die Ursprungsfarbe (hsl(0 100% 50%)) in ein rgb()-Äquivalent (rgb(255 0 0)).
• Setzt den R Kanalwert der Ausgabefarbe auf den R Kanalwert des rgb()-Äquivalents der Ursprungsfarbe — 255.
• Setzt die G und B Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 80 und 80.

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 Alpha-Kanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Ausgabefarb-Alpha-Kanal nicht angegeben wird, entspricht er standardmäßig dem Alpha-Kanal-Wert der Ursprungsfarbe. Wenn der Alpha-Kanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), beträgt er standardmäßig 1. Daher sind die Ursprungs- und Ausgabefarb-Alpha-Kanalwerte für die obigen Beispiele 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarb-Alpha-Kanalwerte angeben. Das erste Beispiel legt den Alpha-Kanal-Wert der Ausgabe gleich dem Alpha-Kanal-Wert der Ursprungsfarbe fest, während das zweite Beispiel einen anderen Alpha-Kanal-Wert der Ausgabe festlegt, der nicht mit dem Alpha-Kanal-Wert der Ursprungsfarbe verwandt ist.

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 hsl()-Ursprungsfarbe erneut in eine rgb()-Darstellung umgewandelt — rgb(255 0 0). calc()-Berechnungen werden auf die R, G, B, und A-Werte angewendet. Nach der Berechnung betragen 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 unterschiedlichen Hintergrundfarben über einem gestreiften Hintergrund dargestellt.

HTML

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

CSS

Die Hintergrundfarben werden mit der rgb()-Funktion gesetzt. Die drei Farben sind gleich. Die dritte ist halbtransparent, daher haben wir einen wiederholenden linearen Farbverlauf auf dem <body> hinzugefügt, um die Transparenz der Alpha-Kanäle 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

Dieses Beispiel gestaltet drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das linke Element erhält die unveränderte --base-color, während die mittleren und rechten Elemente Varianten dieser --base-color erhalten, die jeweils weniger Rot und mehr Blau enthalten.

Diese Varianten werden mit relativen Farben definiert — die benutzerdefinierte Eigenschaft --base-color wird in eine rgb()-Funktion übergeben und die Ausgabefarbe wird mit ihren Rot- und Blau-Kanälen modifiziert, um den gewünschten Effekt mit calc()-Funktionen zu erreichen, während der Grün-Kanal 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 Kompatibilitätsgründen akzeptiert die rgb()-Funktion eine Form, bei der alle Werte durch Kommas getrennt sind.

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 Farbnationen
• sRGB Farb-Picker und Umwandlungswerkzeug
• Verwendung von relativen Farben
• CSS-Farben Modul