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

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

A Optional

Ein <alpha-value> repräsentiert den Alphakanalwert der Farbe, 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 Alphakanal anzugeben. Wenn der Wert des A-Kanals nicht explizit angegeben wird, beträgt er standardmäßig 100%. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) eingeleitet.

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

A Optional

Ein <alpha-value> repräsentiert den Alphakanalwert der Ausgabefarbe, 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 Alphakanal anzugeben. Wenn der Wert des A-Kanals nicht explizit angegeben wird, beträgt er standardmäßig den Alphakanalwert der Ursprungsfarbe. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) eingeleitet.

Definieren der Ausgabekanalkomponenten relativer Farben

Beim Verwenden der relativen Farbsyntax innerhalb einer rgb()-Funktion wandelt der Browser die Ursprungsfarbe in eine äquivalente RGB-Farbe um (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 einen Alphakanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

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

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

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste Beispiel gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus, 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 in einem echten Codebasis verwenden würden und wahrscheinlich einfach einen absoluten Farbwert verwenden würden. Wir haben diese Beispiele als Ausgangspunkt zum Erlernen der relativen rgb()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (äquivalent 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 Ausgabe-Kanalwerte:

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 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 erstellt eine relative Farbe basierend auf der Ursprungsfarbe:

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)) konvertiert.
• Wird der R-Kanalwert für die Ausgabefarbe auf den R-Kanalwert des rgb()-Äquivalents der Ursprungsfarbe gesetzt — 255.
• Werden die G- und B-Kanalwerte der Ausgabefarbe 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 in diesem Abschnitt bisher gesehen haben, wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, entspricht er standardmäßig dem Wert des Alphakanals der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), beträgt er standardmäßig 1. Daher sind die Werte der Ursprungs- und Ausgabefarbe 1 für die obigen Beispiele.

Werfen wir nun einen Blick auf einige Beispiele, die Werte für die Alphakanäle der Ursprungs- und Ausgabefarben angeben. Das erste Beispiel gibt den Alphakanalwert der Ausgabefarbe als den gleichen wie den der Ursprungsfarbe an, während das zweite Beispiel einen anderen Alphakanalwert der Ausgabefarbe angibt, der nicht mit dem der Ursprungsfarbe in Zusammenhang steht.

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 sind die R-, G-, B- und A-Werte 127.5, 25, 175 beziehungsweise 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

Grundlegende Syntax

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()-Funktion gesetzt. Die drei Farben sind gleich. Die dritte ist halbtransparent, also haben wir ein repeating-linear-gradient() auf dem <body> eingefü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, #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

Verwenden relativer Farben mit rgb()

In diesem Beispiel werden drei <div>-Elemente mit unterschiedlichen Hintergrundfarben gestylt. Das linke erhält die unveränderte --base-color, während die mittleren und rechten Farbvarianten dieser --base-color gegeben werden, die sukzessive mehr vom roten Kanal entfernen und mehr zum blauen Kanal 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 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: Kommagetrennte Werte

Aus historischen Gründen akzeptiert die rgb()-Funktion eine Form, in 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
• Farbformat-Konverter-Tool
• Verwendung relativer Farben
• CSS Farben Modul