RGB – additives Farbsystem für Bildschirme und digitale Medien

RGB (Red, Green, Blue) ist ein additives Farbmodell, bei dem Rot-, Grün- und Blaulichtstrahlen in unterschiedlichen Intensitäten kombiniert werden, um alle auf Bildschirmen darstellbaren Farben zu erzeugen.

Rubrik: Grundlagen der Gestaltung · Unterrubrik: Farbsysteme · Niveau: Einsteiger Synonyme / Auch bekannt als: RGB-Farbraum, additives Farbmodell; englisch: RGB Color Model

Was ist RGB?

RGB ist das fundamentale Farbmodell aller digitalen Bildschirme: Monitore, Smartphones, Tablets, Fernseher und Projektoren erzeugen Farben durch Kombination von roten, grünen und blauen Lichtpunkten (Pixel). Der Name kommt von den drei Grundfarben des Lichts: Red (Rot), Green (Grün) und Blue (Blau). Jede Farbe erhält einen Wert zwischen 0 (aus) und 255 (volle Intensität). Addiert man alle drei auf Maximum, entsteht Weiß; alle drei auf 0 ergeben Schwarz.

Erklärung

Das Prinzip der additiven Farbmischung basiert auf der Funktionsweise des menschlichen Auges: Die Netzhaut besitzt drei Typen von Zapfenzellen, die jeweils empfindlich auf Rot, Grün oder Blau sind. Bildschirme nutzen dieses Prinzip, indem sie winzige rote, grüne und blaue Subpixel so ansteuern, dass das Auge aus ihrer Mischung jede gewünschte Farbe wahrnimmt.

Farbwerte im RGB-System: Jeder Kanal (R, G, B) kann Werte von 0 bis 255 annehmen – insgesamt 256 Stufen pro Kanal. Daraus ergibt sich eine mögliche Farbanzahl von 256 × 256 × 256 = 16.777.216 Farben (24-Bit-Farbe, „True Color"). In der Praxis werden RGB-Farben häufig als:

• Dezimalwerte: rgb(255, 128, 0) – Orange
• Hexadezimalcode: #FF8000 – Orange
• Prozentangaben: rgb(100%, 50%, 0%)

angegeben.

Additive Mischung: Im Gegensatz zu Pigmenten addiert Licht sich:

• Rot + Grün = Gelb
• Rot + Blau = Magenta
• Grün + Blau = Cyan
• Rot + Grün + Blau = Weiß

Dies ist das Gegenteil der subtraktiven Mischung von Druckfarben (CMYK), bei der Farben durch Absorption entstehen.

RGB-Varianten: Der Standard-RGB-Farbraum für das Web ist sRGB (Standard RGB), der auf dem gRGB-Standard basiert und auf den meisten Bildschirmen ohne Farbmanagement korrekt dargestellt wird. Für professionelle Fotografie und Videobearbeitung werden erweiterter Farbräume wie Adobe RGB (größerer Gamut) oder DCI-P3 (Kino-Standard) verwendet.

Beispiele

1. Webdesign in Figma: Alle Farben werden in HEX oder RGB angegeben – z. B. Primärfarbe Blau als #1A73E8 (RGB: 26, 115, 232).
2. Bildbearbeitung in Photoshop: Das Programm öffnet Fotos standardmäßig im RGB-Modus; für Druckausgabe muss in CMYK konvertiert werden.
3. Videobearbeitung in DaVinci Resolve: Das Color Grading erfolgt im RGB-Farbraum; Scopes zeigen Rot-, Grün- und Blaukanäle separat.
4. UI-Design in Sketch: Alle Buttonfarben, Hintergründe und Textfarben werden in Hex-Codes (RGB-basiert) definiert und als Design-Token exportiert.
5. Programmierung in CSS: Farben in Stylesheets werden als rgb(255, 0, 0) oder #FF0000 (Rot) angegeben.

In der Praxis

Beim Arbeiten mit Adobe Photoshop immer prüfen, ob das Dokument im RGB-Modus (für Bildschirm) oder CMYK-Modus (für Druck) vorliegt: Bild → Modus → RGB-Farbe. In Figma werden alle Farben intern in RGB gespeichert und als HEX ausgegeben. Für barrierefreies Design muss der Kontrastwert zwischen Vorder- und Hintergrundfarbe WCAG-konform sein (mindestens 4,5:1 für normalen Text) – Tools wie „Contrast" oder der Figma-Plugin „Color Contrast Checker" prüfen dies automatisch. Für Print immer in CMYK konvertieren oder ICC-Profil-konformes PDF exportieren.

Vergleich & Abgrenzung

RGB ist das Bildschirm-Farbmodell und unterscheidet sich grundlegend von CMYK (Druckfarben). CMYK ist subtraktiv – Farben entstehen durch Absorption. RGB ist additiv – Farben entstehen durch Lichtaddition. HSB/HSL ist kein eigenes Farbmodell, sondern eine alternative Beschreibungsweise für RGB-Farben, die intuitiver zu bedienen ist. sRGB ist ein spezifischer RGB-Farbraum mit definierten Grenzen (Gamut), der als Webstandard gilt.

Häufige Fragen (FAQ)

Warum sehen Farben am Bildschirm anders aus als im Druck? Bildschirme verwenden RGB (additive Lichtfarben), Drucker CMYK (subtraktive Tintenfarben). RGB kann deutlich leuchtendere und sattere Farben darstellen als CMYK, weil Licht gemischt wird. Im Druck wird Licht von Papier reflektiert, was den Farbumfang begrenzt. Bestimmte RGB-Farben – besonders sehr leuchtende Töne in Türkis, Orange oder leuchtendem Blau – sind im CMYK-Druck nicht reproduzierbar. Für druckoptimierte Arbeiten ist Soft-Proofing in Photoshop (Ansicht → Proof) unerlässlich.

Was bedeutet der Hexadezimalcode einer Farbe? Der Hex-Code (z. B. #FF8000) ist eine Kurzschreibweise für RGB-Werte. Die ersten zwei Zeichen (#FF) stehen für den Rotwert (FF hex = 255 dezimal), die mittleren zwei für Grün (80 hex = 128 dezimal) und die letzten zwei für Blau (00 hex = 0 dezimal). Das ergibt RGB(255, 128, 0) – Orange. Hexadezimal-Codes sind der Standard in HTML/CSS und werden von allen Design-Tools als Eingabe akzeptiert.

Verwandte Einträge

• CMYK – subtraktives Farbsystem für Druck
• sRGB – Standard-Farbraum für digitale Medien
• Farbtiefe: 8-Bit, 16-Bit, 32-Bit

Weiterführend

• Blatner, David / Fraser, Bruce (2004): Real World Color Management. Peachpit Press.
• Adobe Systems (2023): RGB vs. CMYK – Wann welches Farbmodell? Adobe Help Center. https://helpx.adobe.com
• Fairchild, Mark D. (2013): Color Appearance Models. Wiley-IS&T.