CSS/Funktionen/rgb()

Browserunterstützung
caniuse.com

Die CSS-Funktion rgb() gibt die Werte für Rot, Grün und Blau entweder als ganze Zahlen im Bereich 0-255 oder Prozentwerte im Bereich von 0%-100% an (jedoch nicht beides gleichzeitig), durch die eine bestimmte Farbe angezeigt wird.
Als optionaler 4. Parameter kann die Deckkraft durch den Transparenzwert des Alphakanals angegeben werden.

anwendbar auf

alle Farbangaben

Parameter

* rot: als …

• • ganze Zahlen im Bereich 0-255 oder
  • Prozentwerte im Bereich von 0%-100%
• grün: als …
  • ganze Zahlen im Bereich 0-255 oder
  • Prozentwerte im Bereich von 0%-100%
• blau: als …
  • ganze Zahlen im Bereich 0-255 oder
  • Prozentwerte im Bereich von 0%-100%
• Deckkraft: (optional) Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz)

Beispiel

button {
  background-color: rgb(0 128 0);
}
button:focus,
button:hover {
  background-color: rgb(0 128 0 /0.5);
}

Die Werte für rot und blau betragen 0, nur grün hat einen Wert von 128.
Bei :hover erhält der Hintergrund eine Deckkraft von 50%, wird auf weißem Hintergrund also heller.

Beachten Sie: Zahlen- und Prozentwerte dürfen nicht vermischt werden.
Neben der Trennung der einzelnen Werte durch Leerzeichen ist weiterhin die Trennung mit Kommata möglich.
Im CSS Color Module 4 ist die rgba()-Funktion in der rgb()-Funktion aufgegangen. Die bisherige Funktion kann in bestehenden Projekten aber beibehalten werden.

Siehe auch

• Farbe/Farbmodelle
  • rgb()-Funktion

Weblinks

W3C: The RGB functions: rgb() and rgba()

• Browser-Support: caniuse.com