RGB Farben
Mit RGB-Werten werden Farben über drei Zahlen beschrieben. Diese stehen für die Anteile von Rot, Grün und Blau. Jeder Wert liegt in einem Bereich von 0 bis 255.
Aufbau und Bedeutung der einzelnen Farbwerte
Ein RGB-Wert ist wie folgt aufgebaut: rgb(Rotwert, Grünwert, Blauwert)
Jeder Wert (Rot, Grün, Blau) kann eine Ganzzahl zwischen 0 und 255 sein und bestimmt die Farbintensität. Dabei steht 0 für die geringste und 255 für die höchste Intensität.
Beispielsweise wird mit rgb(255, 0, 0) Rot angezeigt, da Rot auf den höchsten Wert (255) und die anderen beiden (Grün und Blau) auf 0 gesetzt sind.
| rgb(255, 255, 255) | rgb(255, 0, 0) | rgb(0, 255, 0) | rgb(0, 0, 255) | rgb(0, 0, 0) |
rgb(255, 255, 255) die Farbe Weiß setzt sich aus den höchsten Farbwerten für Rot (255), Grün (255) und Blau (255) zusammen.
rgb(255, 0, 0) die Farbe Rot hat ihren höchsten Wert für Rot (255) und ihre niedrigsten Werte für Grün (0) und Blau (0).
rgb(0, 255, 0) die Farbe Grün hat ihren höchsten Wert für Grün (255) und ihre niedrigsten Werte für Rot (0) und Blau (0).
rgb(0, 0, 255) die Farbe Blau hat ihren höchsten Wert für Blau (255) und ihre niedrigsten Werte für Rot (0) und Grün (0).
rgb(0, 0, 0) die Farbe Schwarz hat ihre niedrigsten Werte für Rot (0), Grün (0) und Blau (0).
Anwendungsbeispiel
<body> einen hellblauen Hintergrund und die Überschrift ist in Rot wiedergegeben. Der Absatz hat einen dunkelgrünen Rahmen und eine blaue Schriftfarbe.<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>
<style>
body {
background-color: rgb(220, 240, 255);
}
h1 {
color: rgb(255, 0, 0);
}
p {
border: solid 1px rgb(0, 125, 0);
padding: 12px;
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<h1>Dieses Beispiel</h1>
<p>Im Beispiel hat der body einen hellblauen Hintergrund und die Überschrift ist in Rot wiedergegeben. Der Absatz hat einen dunkelgrünen Rahmen und eine blaue Schriftfarbe.</p>
</body>
</html>
Hinweise zu Unterschieden und Besonderheiten
RGB-Werte bestehen nur aus Zahlen und unterscheiden sich damit von hexadezimalen Farbwerten, die zusätzlich Buchstaben verwenden.
Die drei Werte stehen direkt für die Anteile von Rot, Grün und Blau und sind daher leicht nachvollziehbar.
RGB-Werte können um einen zusätzlichen Wert ergänzt werden. Dieser wird als Alphakanal bezeichnet und steuert die Transparenz einer Farbe.
RGB-Werte werden häufig verwendet, wenn Farben gezielt angepasst oder verändert werden sollen.
Alphakanal in RGB beeinflussen
Der Alphakanal wird als vierter Wert angegeben, rgba(255, 0, 0, 1) und liegt zwischen 0 und 1.
0 steht für vollständig transparent, 1 für vollständig sichtbar.
| rgb(255, 0, 0, 1) | rgb(255, 0, 0, 0.75) | rgb(255, 0, 0, 0.5) | rgb(255, 0, 0, 0.3) | rgb(255, 0, 0, 0.15) |
| rgb(0, 255, 0, 1) | rgb(0, 255, 0, 0.75) | rgb(0, 255, 0, 0.5) | rgb(0, 255, 0, 0.3) | rgb(0, 255, 0, 0.15) |
| rgb(0, 0, 255, 1) | rgb(0, 0, 255, 0.75) | rgb(0, 0, 255, 0.5) | rgb(0, 0, 255, 0.3) | rgb(0, 0, 255, 0.15) |
| rgb(0, 0, 0, 1) | rgb(0, 0, 0, 0.75) | rgb(0, 0, 0, 0.5) | rgb(0, 0, 0, 0.3) | rgb(0, 0, 0, 0.15) |