Hex zu RGB Farbkonvertierung: Vollständiger Leitfaden

31. März 2026 · 12 Min. Lesezeit

Wenn Sie jemals mit Webdesign, CSS oder Grafiksoftware gearbeitet haben, sind Sie auf Hex-Farbcodes gestoßen — diese kryptischen Zeichenfolgen wie #FF5733 oder #3498DB. Aber was bedeuten sie eigentlich, und wie stehen sie in Beziehung zu RGB-Werten?

Das Verstehen dieser Konvertierung ist grundlegend für die Arbeit mit digitalen Farben, egal ob Sie eine Website erstellen, ein Logo entwerfen, Bilder programmatisch verarbeiten oder einen Farbton auf dem Bildschirm auswählen. Die Beziehung zwischen hexadezimaler und RGB-Notation ist nicht nur eine technische Kuriosität — es ist eine praktische Fähigkeit, die Ihnen hilft, effizienter mit Farben über verschiedene Plattformen und Tools hinweg zu arbeiten.

Dieser umfassende Leitfaden deckt alles ab, was Sie über Hex- und RGB-Farben wissen müssen: wie beide Systeme funktionieren, die mathematischen Prinzipien hinter der Konvertierung, praktische Beispiele, die Sie sofort verwenden können, eine praktische Referenztabelle beliebter Farben, CSS-Best-Practices und die Tools, die die Konvertierung mühelos machen.

Das RGB-Farbmodell verstehen

Das RGB-Farbmodell ist ein additives Farbsystem, das in Bildschirmen, Monitoren und digitalen Displays verwendet wird. Jede Farbe, die Sie auf Ihrem Bildschirm sehen, wird durch Mischen von drei Primärfarben des Lichts erzeugt:

• Rot (R) — Intensität von 0 bis 255
• Grün (G) — Intensität von 0 bis 255
• Blau (B) — Intensität von 0 bis 255

Wenn alle drei Kanäle bei 0 sind, erhalten Sie Schwarz (kein Licht). Wenn alle drei bei 255 sind, erhalten Sie Weiß (volles Licht). Dies gibt uns 256 × 256 × 256 = 16.777.216 mögliche Farben — mehr als das menschliche Auge unterscheiden kann.

Der Begriff „additiv" bedeutet, dass sich die Farben addieren — im Gegensatz zu Farbe (subtraktive Mischung), wo das Kombinieren von Farben die Dinge dunkler macht, macht das Mischen von Licht die Dinge heller. Deshalb kann Ihr Monitor so lebendige, leuchtende Farben erzeugen, die mit physischen Pigmenten unmöglich zu erreichen wären.

Warum RGB 0-255 verwendet

Der Bereich 0-255 ist nicht willkürlich. Er repräsentiert 8 Bit Daten (ein Byte), die 2⁸ = 256 verschiedene Werte speichern können. Da Computer binär arbeiten, macht dies RGB-Werte extrem effizient zu speichern und zu verarbeiten.

Jedes Pixel auf Ihrem Bildschirm verwendet insgesamt 24 Bit (8 Bit pro Kanal), weshalb Sie oft den Begriff „24-Bit-Farbe" oder „True Color" hören, wenn es um Display-Fähigkeiten geht.

Wie Hex-Farbcodes funktionieren

Ein hexadezimaler Farbcode ist einfach eine kompakte Art, einen RGB-Wert zu schreiben. Anstelle von drei separaten Dezimalzahlen kombiniert Hex sie in einer einzigen sechsstelligen Zeichenfolge, der ein Rautezeichen (#) vorangestellt ist.

Das Format sieht so aus: #RRGGBB

Jedes Zeichenpaar repräsentiert einen Farbkanal in Basis-16 (hexadezimaler) Notation:

• Erste zwei Zeichen (RR) = Rotwert
• Mittlere zwei Zeichen (GG) = Grünwert
• Letzte zwei Zeichen (BB) = Blauwert

Zum Beispiel zerlegt sich #FF5733 wie folgt:

• FF = 255 Rot
• 57 = 87 Grün
• 33 = 51 Blau

Grundlagen des hexadezimalen Zahlensystems

Hexadezimal (Basis-16) verwendet 16 Ziffern anstelle der 10, die wir im alltäglichen Dezimalzählen verwenden. Die Ziffern sind: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

So werden Hex-Ziffern auf Dezimalwerte abgebildet:

Kurzschreibweise für Hex-Notation

Wenn beide Ziffern in jedem Farbpaar identisch sind, können Sie eine dreistellige Kurzschreibweise verwenden. Zum Beispiel:

• #FFFFFF kann als #FFF geschrieben werden (Weiß)
• #000000 kann als #000 geschrieben werden (Schwarz)
• #FF0000 kann als #F00 geschrieben werden (Rot)
• #3399CC kann als #39C geschrieben werden

Browser erweitern die Kurzschreibweise automatisch, indem sie jede Ziffer wiederholen. Also wird #39C zu #3399CC.

Die Konvertierungsmathematik: Hex zu RGB

Die Konvertierung von Hex zu RGB beinhaltet die Umwandlung jedes zweistelligen Hex-Paares in sein dezimales Äquivalent. Die mathematische Formel ist einfach:

Dezimalwert = (Erste Ziffer × 16) + Zweite Ziffer

Lassen Sie uns #FF5733 aufschlüsseln:

Rotkanal (FF):

• F = 15 in Dezimal
• F = 15 in Dezimal
• Berechnung: (15 × 16) + 15 = 240 + 15 = 255

Grünkanal (57):

• 5 = 5 in Dezimal
• 7 = 7 in Dezimal
• Berechnung: (5 × 16) + 7 = 80 + 7 = 87

Blaukanal (33):

• 3 = 3 in Dezimal
• 3 = 3 in Dezimal
• Berechnung: (3 × 16) + 3 = 48 + 3 = 51

Ergebnis: #FF5733 = rgb(255, 87, 51)

Warum mit 16 multiplizieren?

In Hexadezimal repräsentiert jede Position eine Potenz von 16, genau wie jede Position in Dezimal eine Potenz von 10 repräsentiert. Die erste Ziffer (ganz links) befindet sich an der „Sechzehnerstelle" (16¹), und die zweite Ziffer befindet sich an der „Einerstelle" (16⁰).

Deshalb multiplizieren wir die erste Ziffer mit 16 und addieren einfach die zweite Ziffer.

Schritt-für-Schritt manuelle Konvertierung

Hier ist eine praktische Anleitung zur Konvertierung jeder Hex-Farbe zu RGB ohne Taschenrechner:

1. Entfernen Sie das Rautezeichen — Beginnen Sie nur mit den sechs Zeichen
2. Teilen Sie in drei Paare auf — Trennen Sie RR, GG und BB
3. Konvertieren Sie jedes Zeichen zu Dezimal — Verwenden Sie die obige Referenztabelle
4. Wenden Sie die Formel an — (Erste × 16) + Zweite für jedes Paar
5. Schreiben Sie die RGB-Notation — Formatieren Sie als rgb(R, G, B)

Beispiel 1: Konvertierung von #3498DB

Lassen Sie uns den beliebten Blauton #3498DB konvertieren:

Schritt 1: In Paare aufteilen: 34, 98, DB

Schritt 2: Rot konvertieren (34):

• 3 = 3, 4 = 4
• (3 × 16) + 4 = 48 + 4 = 52

Schritt 3: Grün konvertieren (98):

• 9 = 9, 8 = 8
• (9 × 16) + 8 = 144 + 8 = 152

Schritt 4: Blau konvertieren (DB):

• D = 13, B = 11
• (13 × 16) + 11 = 208 + 11 = 219

Ergebnis: rgb(52, 152, 219)

Beispiel 2: Konvertierung von #E74C3C

Ein weiteres Beispiel mit der Farbe #E74C3C (ein lebendiges Rot):

Rot (E7): (14 × 16) + 7 = 224 + 7 = 231

Grün (4C): (4 × 16) + 12 = 64 + 12 = 76

Blau (3C): (3 × 16) + 12 = 48 + 12 = 60

Ergebnis: rgb(231, 76, 60)

Referenztabelle gängiger Hex-Farbcodes

Hier ist eine umfassende Referenz beliebter Farben mit sowohl Hex- als auch RGB-Werten. Diese werden häufig in Webdesign, Branding und UI-Entwicklung verwendet:

Moderne UI-Farbpalette

Diese Farben sind beliebt im zeitgenössischen Webdesign und in Designsystemen: