CSS rgb() Funktion

Definition und Verwendung

CSS rgb() Funktionen mittels des Rot-Grün-Blau (RGB)-Farbmodells angegeben. Eine optionale Transparenzkanal kann ebenfalls hinzugefügt werden, der die Transparenz der Farbe darstellt.

RGB-Farbwerte werden durch rgb(red green blue) Spezifizieren. Jeder Parameter definiert die Intensität der Farbe und kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Zum Beispiel wird der Wert rgb(0 0 255) als Blau dargestellt, da der Blauton auf den höchsten Wert (255) gesetzt ist, während die anderen Parameter auf 0 gesetzt sind.

Hinweis:rgba() Funktion ist rgb() Alternativname der Funktion. Es wird empfohlen, rgb() Funktion.

Beispiel

Definieren Sie verschiedene RGB(A)-Farben:

#p1 {background-color:rgb(255 0 0);} /* Rot */
#p2 {background-color:rgb(0 255 0);} /* Grün */
#p3 {background-color:rgb(0 0 255);} /* Blau */
#p4 {background-color:rgb(192 192 192);} /* Grau */
#p5 {background-color:rgb(255 255 0);} /* Gelb */
#p6 {background-color:rgb(255 0 255);} /* Kirschrot */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* Kirschrot mit Transparenz */
#p8 {background-color:rgb(0 0 255 / 50%);} /* Blau mit Transparenz */

Versuchen Sie es selbst

CSS-Syntax

Absolute Wertssyntax

rgb(R G B / A)
Wert Beschreibung
R

Erforderlich. Definiert die Intensität der Farbe Rot, kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Man kann auch none (das entspricht 0%) verwenden.
G

Erforderlich. Definiert die Intensität der Farbe Grün, kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Man kann auch none (das entspricht 0%) verwenden.
B

Erforderlich. Definiert die Intensität der Farbe Blau, kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Man kann auch none (das entspricht 0%) verwenden.
/ A

Optional. Stellt den Transparenzkanalwert der Farbe dar, 0% (oder 0) bedeutet vollständig transparent, 100% (oder 1) bedeutet vollständig deckend.

Man kann auch none (was für keine Transparenzkanäle steht) verwenden. Der Standardwert ist 100%.

Relative Wertssyntax

rgb(from color R G B / A)
Wert Beschreibung
from color

Beginnt mit dem Schlüsselwort from, gefolgt von dem Wert der ursprünglichen Farbe.

Dies ist die ursprüngliche Farbe, auf der der relative Farbton basiert.
R

Erforderlich. Definiert die Intensität der Farbe Rot, kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Man kann auch none (das entspricht 0%) verwenden.
G

Erforderlich. Definiert die Intensität der Farbe Grün, kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Man kann auch none (das entspricht 0%) verwenden.
B

Erforderlich. Definiert die Intensität der Farbe Blau, kann ein Integer zwischen 0 und 255 oder ein Prozentsatz zwischen 0% und 100% sein.

Man kann auch none (das entspricht 0%) verwenden.
/ A

Optional. Stellt den Transparenzkanalwert der Farbe dar, 0% (oder 0) bedeutet vollständig transparent, 100% (oder 1) bedeutet vollständig deckend.

Man kann auch none (was für keine Transparenzkanäle steht) verwenden. Der Standardwert ist 100%.

Technische Details

Version: CSS2

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
Durch Transparenzparameter definierte rgb()
65 79 52 12.1 52
Leerzeichen getrennte Parameter
65 79 52 12.1 52