rgb()

Probieren Sie es aus

background: rgb(31 120 50);

background: rgb(30% 20% 50%);

background: rgb(255 122 127 / 80%);

background: rgb(255 122 127 / 0.2);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Syntax

/* Absolute values */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* Relative values */
rgb(from green r g b / 0.5)
rgb(from #123456 calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

/* Legacy 'rgba()' alias */
rgba(0 255 255)

/* Legacy format */
rgb(0, 255, 255)
rgb(0, 255, 255, 50%)

Werte

Nachfolgend sind Beschreibungen der zulässigen Werte für sowohl absolute als auch relative Farben aufgeführt.

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 (was in diesem Fall 0% entspricht) dargestellt werden. Diese Werte repräsentieren die roten, grünen und blauen Kanäle entsprechend.

A Optional

Ein <alpha-value>, das 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 anzugeben, dass kein Alpha-Kanal vorhanden ist. Wenn der Wert des A-Kanals nicht explizit angegeben ist, wird er standardmäßig auf 100% festgelegt. Wenn er enthalten ist, 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 bei der Definition einer relativen Farbe angegeben, 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 (was in diesem Fall 0% entspricht) dargestellt werden. Diese Werte repräsentieren die roten, grünen und blauen Kanalwerte der Ausgabefarbe entsprechend.

A Optional

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

Definieren der Kanalkomponenten der relativen Farbausgabe

Wenn die relative Farbsyntax innerhalb einer rgb()-Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente RGB-Farbe (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — r (rot), g (grün) und b (blau) — sowie ein Alpha-Kanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um beim Definieren der Ausgabefarbkanalwerte verwendet zu werden:

• Die r, g und b-Werte werden jeweils auf <number>-Werte zwischen 0 und 255 aufgelöst.
• Der alpha-Kanal wird zu einem <number>-Wert 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. Nachfolgend untersuchen wir einige Beispiele, um dies zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Beim ersten Beispiel gibt die Funktion dieselbe Farbe wie die Ursprungsfarbe aus, und beim zweiten Beispiel gibt die Funktion eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Es ist unwahrscheinlich, dass Sie diese in einem echten Code-Bestand verwenden würden; wahrscheinlich würden Sie stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum 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-Kanäle der Ursprungsfarbe (255, 0 und 0) als Ausgabekanäle:

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

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

Die nächste Funktion verwendet absolute Werte für die 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-Ä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 respektive.

Die endgültige Ausgabefarbe entspricht rgb(255 80 80) im sRGB-Farbraum — color(srgb 1 0.313726 0.313726).

In den bisher in diesem Abschnitt gezeigten Beispielen wurden die Alpha-Kanäle weder für die Ursprungs- noch für die Ausgabefarbe explizit spezifiziert. Wenn der Alpha-Kanal der Ausgabefarbe nicht spezifiziert wird, wird er standardmäßig auf denselben Wert wie der Alpha-Kanal der Ursprungsfarbe festgelegt. Wenn der Alpha-Kanal der Ursprungsfarbe nicht spezifiziert ist (und es sich nicht um eine relative Farbe handelt), wird er auf 1 gesetzt. Daher sind die Alpha-Kanal-Werte der Ursprungs- und der Ausgabefarbe in den obigen Beispielen 1.

Betrachten wir einige Beispiele, die sowohl die Alpha-Kanalwerte der Ursprungs- als auch der Ausgabefarbe spezifizieren. Das erste Beispiel spezifiziert den Alpha-Kanalwert der Ausgabe so, dass er mit dem Alpha-Kanalwert der Ursprungsfarbe übereinstimmt, während das zweite Beispiel einen anderen Alpha-Kanalwert der Ausgabe spezifiziert, der nicht mit dem Alpha-Kanalwert 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 konvertiert — rgb(255 0 0). calc()-Berechnungen werden auf die R, G, B und A-Werte angewendet. Nach der Berechnung sind die Werte R, G, B und A 127.5, 25, 175 bzw. 0.9. Die endgültige Ausgabefarbe entspricht 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))

Formale Syntax

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

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

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

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

Beispiele

Grundsyntax

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

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 dieselben. Die dritte ist halbtransparent, daher haben wir einen repeating-linear-gradient() auf dem <body> eingeschlossen, um die Transparenz von Alpha-Kanälen besser zu demonstrieren.

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

body {
  background: repeating-linear-gradient(-45deg, #eeeeee 0 2px, white 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

Verwendung relativer Farben mit rgb()

Dieses Beispiel gestaltet drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das linke Element erhält die unveränderte --base-color, während das mittlere und das rechte jeweils Varianten dieser --base-color erhalten, die schrittweise mehr aus dem roten Kanal entfernen und mehr zum blauen Kanal hinzufügen.

Diese Varianten werden unter Verwendung relativer Farben definiert — die benutzerdefinierte Eigenschaft --base-color wird in eine rgb()-Funktion übergeben, und die Ausgabefarbe hat ihre roten und blauen Kanäle modifiziert, um den gewünschten Effekt über calc()-Funktionen zu erzielen, 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

Alte Syntax: Komma-getrennte Werte

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Der <color> Datentyp für eine Liste aller Farbnotationen
• Konverter-Tool für Farbformate
• Verwendung relativer Farben
• CSS-Farben Modul