Wie Computer Farben erzeugen: RGB, HEX und Binärzahlen erklärt
#FF0000. #00FF00. #0000FF. Diese Schreibweise begegnet einem früher oder später in Design-Entwürfen oder im Code. Sie wirkt wie ein Geheimcode oder ein Spielcode – dabei ist sie schlicht der Name einer Farbe.
Von oben nach unten: Rot, Grün, Blau. So nennt der Computer Farben. Diese Schreibweise hat ihren Ursprung, der hier erklärt wird.
RGB — drei Buchstaben, die Farben erzeugen
Red, Green, Blue. Die drei Grundfarben des Lichts. Durch unterschiedliche Mischungsverhältnisse entsteht jede sichtbare Farbe.
RGB begegnet uns täglich
Überall wo ein Bildschirm vorhanden ist, steckt RGB dahinter.
- Monitor / TV — jedes Pixel besteht aus drei Punkten: Rot, Grün, Blau
- Smartphone-Display — gleicher Aufbau, kleinere Pixel
- Gaming-Tastatur-LED — jede Taste enthält drei LEDs: R, G, B
- PC-Gehäusebeleuchtung — RGB-Streifen empfangen RGB-Signale
Vergrößert man einen Bildschirm stark genug, sieht man es: Rot, Grün, Blau. Mehr steckt nicht dahinter. Millionen winziger RGB-Punkte ergeben zusammen das sichtbare Bild.
Farben entstehen durch Mischung
Jeder RGB-Kanal hat einen Wertebereich von 0 bis 255.
RGB(255, 0, 0)— nur Rot auf Maximum → reines RotRGB(0, 255, 0)— nur Grün auf Maximum → reines GrünRGB(255, 255, 0)— Rot + Grün → GelbRGB(0, 0, 0)— alle ausgeschaltet → SchwarzRGB(255, 255, 255)— alle auf Maximum → Weiß
Dass Rot und Grün zusammen Gelb ergeben, wirkt zunächst ungewohnt – dabei handelt es sich um additive Farbmischung. Sie folgt anderen Regeln als das Mischen von Farben im Malunterricht (Rot + Grün = Braun). Licht wird bei Zugabe heller; addiert man alle Farben, entsteht Weiß.
Verschieben Sie die drei Schieberegler und überzeugen Sie sich selbst.
Die achtstellige Zahl am rechten Rand zeigt die Binärdarstellung des jeweiligen Kanals. Beim Verschieben des Reglers ändert sie sich mit. Wie 0 und 1 zusammen 256 Stufen ergeben, ist das nächste Thema.
Warum genau 0 bis 255?
Ein Computer kennt nur 0 und 1. Eine einzelne Stelle, die 0 oder 1 speichert, heißt Bit. Mit jeder zusätzlichen Bitstelle verdoppelt sich die Anzahl der darstellbaren Werte.
8 Bit = 1 Byte. Eine Farbe hat drei RGB-Kanäle, also 3 Byte = 24 Bit insgesamt. Mit 24 Bit lassen sich rund 16,7 Millionen Farben darstellen – genug, um die Unterscheidungsfähigkeit des menschlichen Auges zu übertreffen. Daher hat sich 1 Byte als Standard für einen Kanal etabliert.
Binärzahlen selbst lesen
Jede Stelle hat einen festen Wert. Von links nach rechts: 128, 64, 32, 16, 8, 4, 2, 1 — Zweierpotenzen.
Addiert man die Werte aller Stellen mit einer 1, erhält man die Dezimalzahl.
Deshalb ist der Maximalwert eines 8-Bit-Wertes 255 – der genaue Grund für den Bereich 0 bis 255 pro RGB-Kanal.
HEX — dieselbe Zahl, kürzer geschrieben
RGB(255, 255, 255). Das sind 16 Zeichen. Für eine CSS-Zeile oder ein Feld im Design-Tool ist das zu viel. Deshalb entstand eine kürzere Schreibweise für dieselben Zahlen.
Was ist Hexadezimal?
Das Hexadezimalsystem stellt mit einem einzigen Zeichen die Werte 0 bis 15 dar. Da es nur zehn Ziffern (0–9) gibt, werden die fehlenden sechs durch Buchstaben ersetzt.
Es gelten drei Regeln:
- 0–9 werden wie gewohnt verwendet
- ab 10 beginnen die Buchstaben mit A
- F ist der Maximalwert eines einzelnen Zeichens (= 15)
Warum ausgerechnet Hexadezimal?
Vier Binärstellen (0000 bis 1111) decken genau 16 Werte ab.
4 Binärstellen = 1 Hexadezimalzeichen. Vier Stellen werden zu einer. Da ein RGB-Kanal 8 Bit umfasst, ergibt das exakt zwei Hexadezimalzeichen pro Kanal.
RGB in HEX umrechnen
Hier wird RGB(255, 87, 51) umgerechnet.
Aus 14 Zeichen werden 7 Zeichen.
Farbe aus HEX ablesen
Umgekehrt lässt sich aus einem HEX-Code die Farbe grob einschätzen.
#FF5733— R max (FF), G mittel (57), B niedrig (33) → Orange mit starkem Rotanteil#3576E0— R niedrig (35), G mittel (76), B hoch (E0) → Blau mit leichtem Violettstich#29A85A— R niedrig (29), G hoch (A8), B niedrig (5A) → frisches Grün
Schon die drei Paare zu lesen reicht aus, um „orange oder blau?” zu entscheiden – eine gemeinsame Sprache für Designer und Entwickler.
Kurz zusammengefasst
- RGB — drei Kanäle (Rot, Grün, Blau), jeweils 0–255
- 8-Bit-Binär — der Grund, warum ein Kanal genau 256 Stufen hat
- HEX — dieselbe Zahl in zwei Zeichen kompakt geschrieben
Wer die drei Konzepte als Einheit versteht, erlebt Farbcodes nicht mehr als Fremdsprache. Die drei Zahlen in RGB sind dieselben sechs Zeichen in HEX.
Der nächste Schritt ist, diese Zahlen in die Sprache von Designern zu übersetzen. Anfragen wie „ein bisschen heller”, „weniger gesättigt” oder „dasselbe auf Papier” lassen sich mit RGB und HEX allein kaum umsetzen. Wie HSL, CMYK und OKLCH dieses Problem lösen, ist Thema von RGB reicht nicht: HSL, CMYK und OKLCH – Farbnotationen im Überblick.