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

A Optional

Ein <alpha-value>, 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 A-Kanalwert nicht explizit angegeben wird, ist er standardmäßig auf 100% gesetzt. Wenn er eingeschlossen ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wertsprache

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 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 gleichwertig zu 0%) dargestellt werden. Diese Werte repräsentieren die roten, grünen und blauen Kanalwerte der Ausgabefarbe.

A Optional

Ein <alpha-value>, 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 A-Kanalwert nicht explizit angegeben wird, ist er standardmäßig auf den Alphakanalwert der Ursprungsfarbe gesetzt. Wenn er eingeschlossen ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Bestimmung der Ausgabekanal-Komponenten relativer Farben

Wenn eine relative Farbsyntax innerhalb einer rgb()-Funktion verwendet wird, 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 definiert — r (rot), g (grün) und b (blau) — plus einem Alphakanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabekanalwerte verwendet zu werden:

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

Wenn eine relative Farbe definiert wird, können die unterschiedlichen Kanäle der Ausgabefarbe auf mehrere verschiedene Weisen ausgedrückt werden. Nachfolgend werden wir einige Beispiele studieren, um dies zu illustrieren.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Allerdings gibt das erste Beispiel die gleiche Farbe wie die Ursprungsfarbe aus, und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen also eigentlich keine relativen Farben! Man würde diese wahrscheinlich nie in einem realen Code verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt gewählt, um die relative rgb()-Syntax kennenzulernen.

Lassen Sie uns mit einer Ursprungsfarbe von hsl(0 100% 50%) beginnen (entspricht rgb(255 0 0)). Die folgende Funktion gibt die gleiche 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)

Der Ausgabe-Farbwert 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 Ausgabe-Farbkanalwerte, was zu einer völlig anderen Farbe führt, die nicht auf der Ursprungsfarbe basiert:

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

In diesem Fall ist der Ausgabe-Farbwert 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)

Dieses 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, jeweils.

Die endgültige Ausgabefarbe ist in einem SRGB-Farbraum das Äquivalent von rgb(255 80 80) — 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 die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, ist er standardmäßig auf den gleichen Wert wie der Alphakanal der Ursprungsfarbe gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), ist er standardmäßig 1. Daher haben die Ursprungs- und Ausgabewerte des Alphakanals den Wert 1 für die obigen Beispiele.

Lassen Sie uns einige Beispiele betrachten, die die Ursprungs- und Ausgabewerte des Alphakanals angeben. Das erste Beispiel gibt den Ausgabewert des Alphakanals als den gleichen wie den Alphawert der Ursprungsfarbe an, während das zweite Beispiel einen anderen Ausgabewert des Alphakanals angibt, der nicht mit dem Alphakanalwert der Ursprungsfarbe in Verbindung 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 Ursprungsfarbe hsl() erneut in eine rgb()-Darstellung umgewandelt — rgb(255 0 0). calc() Berechnungen werden auf die R-, G-, B- und A-Werte angewandt. Nach der Berechnung betragen die R-, G-, B- und A-Werte 127.5, 25, 175 und 0.9. Die endgültige Ausgabefarbe ist in einem sRGB-Farbraum das Äquivalent von rgb(127.5 25 175 / 0.9): 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( [ <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()-Farbfunktionsnotation festgelegt. Die drei Farben sind identisch. Die dritte ist halbtransparent, daher haben wir einen repeating-linear-gradient() auf den <body> angewendet, um die Transparenz von Alphakanä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 stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das linke wird mit der unveränderten --base-color versehen, während die mittleren und rechten Varianten dieser --base-color Farben successive 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 eingespeist, 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

Veraltete Syntax: Komma-getrennte Werte

Aus zerlegten Gründen akzeptiert die rgb() Funktion eine Form, bei der alle Werte durch Kommas getrennt werden.

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
• sRGB Farbwähler und Konvertierungstool
• Verwendung von relativen Farben
• CSS-Farben Modul