rgb()

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

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

A Optional

Ein <alpha-value> Wert, der 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 explizit keinen Alphakanal anzugeben. Wenn der Kanalwert A nicht explizit angegeben wird, ist der Standardwert 100%. Falls enthalten, geht dem Wert ein Schrägstrich (/) voraus.

Relative Wertsyntax

rgb(from <color> R G B[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from ist immer enthalten, 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.

R, G, B

Jeder Wert kann als ein <number> zwischen 0 und 255, als ein <percentage> zwischen 0% und 100% oder als das Schlüsselwort none (entsprechend 0% in diesem Fall) dargestellt werden. Diese Werte stellen die Rot-, Grün- und Blaukanalwerte der Ausgabefarbe dar.

A Optional

Ein <alpha-value> Wert, der 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 explizit keinen Alphakanal anzugeben. Wenn der Kanalwert A nicht explizit angegeben wird, entspricht er dem Alphakanalwert der Ursprungsfarbe. Falls enthalten, geht dem Wert ein Schrägstrich (/) voraus.

Definition der Ausgangskanalwerte relativer Farben

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

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

Bei der Definition einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Arten ausgedrückt werden. Im Folgenden sehen wir uns einige Beispiele zur Verdeutlichung an.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Allerdings gibt das erste Beispiel dieselbe Farbe wie die Ursprungsfarbe aus und das zweite erzeugt eine Farbe, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Sie würden diese wahrscheinlich nie in einem realen Code verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative 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 (255, 0 und 0) der Ursprungsfarbe als Ausgangskanalwerte:

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

Die Ausgabe dieser Funktion ist das color() Pendant zu rgb(255 0 0): color(srgb 1 0 0).

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

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

Im obigen Fall ist die Ausgabefarbe das color() Äquivalent zu rgb(132 132 224): color(srgb 0.517647 0.517647 0.878431).

Die folgende Funktion erstellt 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 für die Ausgabefarbe auf den R Kanalwert des Ursprungsfarb-rgb()-Äquivalents — 255.
• Setzt die G und B Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 80 und 80 beziehungsweise.

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

In den Beispielen, die wir in diesem Abschnitt bisher gesehen haben, sind die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, entspricht er dem gleichen Wert wie der Alphakanal der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher haben der Ursprungs- und der Ausgangs-Alphakanal in den obigen Beispielen den Wert 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarb-Alphakanalwerte spezifizieren. Das erste Beispiel spezifiziert den Ausgabefarb-Alphakanalwert als den gleichen wie den Ursprungs-Alphakanalwert, während das zweite ein anderes Ausgabefarb-Alphakanalwert spezifiziert, der nicht mit dem Ursprungs-Alphakanalwert zusammenhängt.

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 — rgb(255 0 0) — konvertiert. 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 zu 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, 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() Farb-Funktion gesetzt. Die drei Farben sind dieselben. Die dritte ist halbtransparent, deshalb haben wir dem <body> einen repeating-linear-gradient() hinzugefügt, um die Transparenz der Alphakanä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 mittlere und rechte Varianten dieser --base-color erhalten, die sukzessive mehr aus dem roten Kanal entfernen und mehr zum blauen Kanal hinzufügen.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird an eine rgb() Funktion übergeben, und die Ausgabefarbe hat ihre roten und blauen Kanäle modifiziert, um den gewünschten Effekt über calc() Funktionen zu erreichen, während der grüne 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 alten Gründen akzeptiert die rgb() Funktion eine Form, in der alle Werte mit Kommata 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 Farbnotationen
• sRGB Farbwähler und Konvertierungswerkzeug
• Verwendung relativer Farben
• CSS-Farben-Modul