rgb() CSS-Funktion

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

A Optional

Ein <alpha-value> repräsentiert den Alphakanalwert der Farbe, 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 anzugeben, dass kein Alphakanal vorhanden ist. Wenn der Wert des A-Kanals nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Wenn eingeschlossen, wird der Wert von einem 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 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 das Schlüsselwort none (in diesem Fall gleichwertig mit 0%) dargestellt werden. Diese Werte repräsentieren die Werte der Rot-, Grün- und Blaukanä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 deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit anzugeben, dass kein Alphakanal vorhanden ist. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf den Alphakanalwert der Ursprungsfarbe gesetzt. Wenn eingeschlossen, wird der Wert von einem Schrägstrich (/) vorangestellt.

Definition der Ausgabekanalkomponenten relativer Farben

Bei der Verwendung der relativen Farbsyntax innerhalb einer rgb()-Funktion wandelt der Browser die Ursprungsfarbe in eine gleichwertige RGB-Farbe um (falls sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte — r (rot), g (grün) und b (blau) — sowie ein Alphakanalwert (alpha) definiert. Diese Kanäle sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Die r-, g- und b-Werte werden jeweils in <number> umgewandelt, die zwischen 0 und 255 liegen, einschließlich.
• Der alpha-Kanal wird in <number> umgewandelt, der zwischen 0 und 1 liegt, einschließlich.

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

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Jedoch gibt das erste Beispiel dieselbe Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen tatsächlich keine relativen Farben! Wahrscheinlich würden Sie diese in einem echten Code nicht verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele aufgenommen, um einen Einstieg in die relative rgb()-Syntax zu bieten.

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 Ausgabekanäle:

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).

In der nächsten Funktion werden absolute Werte für die Kanäle der Ausgabefarbe verwendet, wodurch eine völlig andere Farbe ausgegeben wird, 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:

• Wandelt die Ursprungsfarbe (hsl(0 100% 50%)) in ein rgb()-Äquivalent (rgb(255 0 0)) um.
• Setzt den R-Kanalwert für die 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 Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, wird er standardmäßig auf den gleichen Wert wie der Alphakanal der Ursprungsfarbe gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er standardmäßig auf 1 gesetzt. Daher sind die Alpha-Kanalwerte der Ursprungs- und Ausgabefarben für die obigen Beispiele 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarbkanalwerte angeben. Das erste Beispiel gibt den Ausgabefarbkanalwert als gleich dem Ursprungsalphakanalwert an, während das zweite einen anderen Ausgabefarbkanalwert angibt, der nicht mit dem Ursprungsalphakanalwert 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 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 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))

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()-Farbfunktion festgelegt. Die drei Farben sind gleich. Die dritte ist halbtransparent, daher haben wir einen repeating-linear-gradient() auf dem <body> 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, #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()

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

Diese Varianten werden unter Verwendung relativer Farben definiert — die benutzerdefinierte Eigenschaft custom property --base-color wird in eine rgb()-Funktion eingegeben, und die Ausgabefarbe hat ihre roten und blauen Kanäle geändert, 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

Veraltete Syntax: durch Kommas getrennte Werte

Aus älteren 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 Farbnennungen
• Farbformat-Konverter-Werkzeug
• Verwendung relativer Farben
• CSS-Farben Modul