RGB ist das Farbmodell für alle digitalen Bildschirme. Es basiert auf den drei Lichtfarben Rot, Grün und Blau, deren additive Mischung über 16 Millionen Farben erzeugen kann. Jede Website, jede App und jedes digitale Design nutzt RGB als Grundlage der Farbdarstellung. Im Unterschied zum CMYK-Modell (für den Druck) arbeitet RGB mit Licht: Jeder Pixel eines Bildschirms leuchtet in einer Mischung aus Rot, Grün und Blau, deren Intensität die wahrgenommene Farbe ergibt. Jeder Kanal hat einen Wert von 0 bis 255, woraus 256 × 256 × 256 = 16,7 Millionen Kombinationen entstehen. In CSS stehen mehrere Notationen zur Verfügung, alle basieren auf RGB: das kompakte HEX-Format (#075CE1), die RGB-Funktion rgb(7, 92, 225) und RGBA mit Transparenz. Wer professionelles Webdesign betreibt, dokumentiert Farben im Styleguide immer in RGB und HEX, weil diese Werte in allen Designtools und Browsern direkt einsetzbar sind.
Was ist das RGB-Farbmodell?
RGB steht für Rot, Grün und Blau, die drei Primärfarben des Lichts. Im RGB-Farbmodell wird Farbe durch die additive Mischung dieser drei Lichtquellen erzeugt: Je mehr Licht hinzukommt, desto heller wird das Ergebnis. Wenn alle drei Kanäle auf Maximum stehen, entsteht Weiß. Wenn alle drei Kanäle auf Null stehen, entsteht Schwarz. Jeder Kanal nimmt einen Wert von 0 bis 255 an, was in der Kombination 16,7 Millionen mögliche Farben ergibt. RGB ist der Standard für alle digitalen Bildschirme: Monitore, Smartphones, Tablets und Fernseher. Im Webdesign werden RGB-Farben in verschiedenen Schreibweisen verwendet: als HEX-Code (#075CE1), als CSS-RGB-Funktion (rgb(7, 92, 225)) oder als RGBA mit Transparenzwert. Im Gegensatz dazu arbeitet CMYK mit Druckfarben und ist für Print konzipiert. Für alle digitalen Projekte gilt: im RGB-Modus arbeiten, da der RGB-Farbraum größer ist und leuchtendere, gesättigtere Farben ermöglicht als CMYK.
Additive Farbmischung
Im Gegensatz zum CMYK-Modell (subtraktiv, für Druck) arbeitet RGB mit Licht. Je mehr Farbe hinzugefügt wird, desto heller wird das Ergebnis:
- Rot + Grün = Gelb
- Rot + Blau = Magenta
- Grün + Blau = Cyan
- Rot + Grün + Blau = Weiß
- Kein Licht = Schwarz
Dieses Prinzip wird in jedem Pixel eines Bildschirms angewendet. Jeder Pixel besteht aus drei winzigen Subpixeln in Rot, Grün und Blau, die mit unterschiedlicher Intensität leuchten.
RGB-Werte verstehen
Jeder der drei Farbkanäle hat einen Wert von 0 bis 255 (8-Bit pro Kanal):
- RGB(0, 0, 0) = Schwarz (kein Licht)
- RGB(255, 255, 255) = Weiß (maximales Licht)
- RGB(255, 0, 0) = Reines Rot
- RGB(7, 92, 225) = PAKU Media Blau
Die mathematische Basis: 256 × 256 × 256 = 16.777.216 mögliche Farben.
RGB im Webdesign
Im Webdesign werden RGB-Farben in verschiedenen Notationen verwendet:
- HEX: #075CE1 (kompakte Schreibweise)
- RGB: rgb(7, 92, 225) (CSS-Funktion)
- RGBA: rgba(7, 92, 225, 0.8) (mit Transparenz)
- HSL: hsl(222, 94%, 45%) (alternative Notation)
Alle Notationen beschreiben die gleichen Farben – nur die Schreibweise unterscheidet sich. In CSS sind alle Varianten gültig.
RGB vs. CMYK: Warum der Unterschied zählt
Der RGB-Farbraum ist größer als der CMYK-Farbraum. Das bedeutet: Bestimmte Farben, die am Bildschirm brillant leuchten, können im Druck nicht reproduziert werden. Besonders betroffen sind:
- Leuchtende Neon-Farben
- Tiefes, gesättigtes Blau
- Kräftiges Grün und Violett
Deshalb dokumentiert ein professioneller Styleguide Farben immer in beiden Modellen – RGB für Digital, CMYK für Print.
Erweiterte RGB-Farbräume
sRGB
Der Standard-Farbraum für Websites und die meisten Bildschirme. Alle CSS-Farbwerte beziehen sich auf sRGB.
Adobe RGB
Ein erweiterter Farbraum mit ca. 35 % mehr Farben als sRGB. Relevant für professionelle Fotografie und Druckvorbereitung.
Display P3
Apples erweiterter Farbraum für aktuelle iPhones, iPads und Macs. Zeigt bis zu 25 % mehr Farben als sRGB. In CSS: color(display-p3 0.03 0.36 0.88).
Praxistipps
- Webdesign immer in sRGB – der kleinste gemeinsame Nenner aller Bildschirme
- Farben in der Farbpalette dokumentieren: RGB, HEX, CMYK
- Monitore kalibrieren: Nur kalibrierte Bildschirme zeigen Farben korrekt
- Transparenz nutzen: RGBA erlaubt halbtransparente Überlagerungen
RGB ist das Fundament der digitalen Farbwelt. Wer Farbtheorie und die technischen Grundlagen versteht, trifft bessere Design-Entscheidungen – ob bei der Farbpalette eines Corporate Designs oder beim täglichen Webdesign.