Hex zu RGB Konverter

TL;DR: Um eine Hex-Farbe in RGB umzuwandeln, teilen Sie den sechsstelligen Hex-Code (z. B. #FF8800) in drei Paare (FF, 88, 00) auf und konvertieren Sie dann jedes Paar von der Basis 16 (hexadezimal) in die Basis 10 (dezimal), um die Rot-, Grün- und Blauwerte (255, 136, 0) zu erhalten.

Was ist der Hex-zu-RGB-Konverter?

Der Hex-zu-RGB-Konverter ist ein kostenloses Online-Tool, das einen hexadezimalen Farbcode – das Standardformat im Webdesign und in CSS – in die entsprechenden RGB-Werte (Rot, Grün, Blau) übersetzt. Während Hex-Codes wie #4285F4 kompakt und maschinenfreundlich sind, benötigen viele Design-Tools, Bildbearbeitungsprogramme und Datenvisualisierungsbibliotheken RGB-Tripel (z. B. rgb(66, 133, 244)). Dieser Konverter schließt diese Lücke sofort, sodass Sie die genauen numerischen Werte ohne manuelle Berechnung kopieren können.

Wer braucht das? Webentwickler, UI/UX-Designer, digitale Künstler und Vermarkter, die Markenfarben von einer Website übernehmen (die oft Hex verwendet) und diese Farben dann in Tools wie Photoshop, Figma oder Matplotlib (Python) eingeben müssen. Es ist auch entscheidend, wenn Sie ARIA-Kontrastprüf-Skripte schreiben oder wenn eine CSS-Variable fehlschlägt und Sie die zugrunde liegenden RGB-Kanalwerte debuggen müssen. Statt einen Farbwähler zu öffnen oder fehleranfällige Kopfrechnungen durchzuführen, fügen Sie den Hex-Code ein und erhalten drei saubere Ganzzahlen zwischen 0 und 255.

So verwenden Sie den Rechner

Die Verwendung des Konverters ist ein zweistufiger Prozess, aber die Eingabe muss korrekt formatiert sein:

1. Hex-Farbe eingeben: Geben Sie Ihren Hex-Wert in das Eingabefeld ein oder fügen Sie ihn ein – zum Beispiel #1E90FF. Das Feld akzeptiert Werte mit oder ohne führendes #-Zeichen. Es akzeptiert keine dreistellige Kurzschreibweise wie #09C; Sie müssen den vollständigen sechsstelligen Code angeben.
2. Klicken Sie auf die Schaltfläche „Konvertieren“: Nach dem Absenden berechnet das Tool sofort die Dezimalwerte für Rot, Grün und Blau.
3. Ergebnis ablesen: Die Ergebnisse werden als drei separate RGB-Werte angezeigt – normalerweise in der Form R: 30, G: 144, B: 255. Einige Versionen zeigen auch die kombinierte CSS-Zeichenfolge rgb(30, 144, 255) zum direkten Kopieren und Einfügen an.

Das ist alles – keine zusätzlichen Einstellungen, keine Regler. Die Kernlogik ist deterministisch, sodass dieselbe Eingabe immer dieselbe Ausgabe ergibt.

Formel und Berechnungsmethode

Die Umrechnung ist reine Basis-16- zu Basis-10-Arithmetik. Ein Hex-Farbcode repräsentiert Rot-, Grün- und Blaukomponenten mit jeweils zwei hexadezimalen Ziffern (0–9 und A–F). Die Formel für einen einzelnen Kanal lautet:

(Erste Ziffer × 16) + Zweite Ziffer

Wobei „Erste Ziffer“ und „Zweite Ziffer“ die Dezimalwerte der Hex-Zeichen sind: 0–9 bleiben wie sie sind, A=10, B=11, C=12, D=13, E=14 und F=15.

Arbeitsbeispiel: Konvertierung von #3C8D2A

Lassen Sie uns einen echten Code Schritt für Schritt aufschlüsseln.

1. Hex-Code aufteilen: #3C8D2A wird zu drei Paaren: Rot = 3C, Grün = 8D, Blau = 2A.
2. Rot konvertieren (3C): Die erste Ziffer ist 3 (Wert 3), die zweite Ziffer ist C (Wert 12). Mit der Formel: (3 × 16) + 12 = 48 + 12 = 60.
3. Grün konvertieren (8D): Erste Ziffer ist 8 (Wert 8), zweite Ziffer ist D (Wert 13). Berechnung: (8 × 16) + 13 = 128 + 13 = 141.
4. Blau konvertieren (2A): Erste Ziffer ist 2 (Wert 2), zweite Ziffer ist A (Wert 10). Berechnung: (2 × 16) + 10 = 32 + 10 = 42.
5. Ergebnisse kombinieren: Das endgültige RGB-Tripel ist rgb(60, 141, 42).

Beachten Sie, dass das führende „#“ ignoriert wird – es ist nur ein Marker, nicht Teil des numerischen Werts.

Praktische Beispiele

Hier sind drei realistische Szenarien mit verschiedenen Eingabetypen und was die Ausgabe im Kontext bedeutet.

Jedes dieser Beispiele bestätigt, dass der höchstmögliche RGB-Wert 255 (aus FF) und der niedrigste 0 (aus 00) ist. Die Umrechnung überschreitet diese Grenzen nie.

Tipps für genaue Ergebnisse

Auch wenn die Mathematik einfach ist, können ein paar Fehler eine sonst perfekte Konvertierung ruinieren. Befolgen Sie diese Tipps basierend auf den spezifischen Eingabeanforderungen des Rechners:

• Immer sechs Ziffern verwenden: Der Konverter erweitert nicht die Kurzschreibweise wie #F80 zu #FF8800. Sie müssen den vollständigen sechsstelligen Code eingeben. Ein dreistelliger Code ist ungültig und führt zu einem Fehler oder einem falschen Wert.
• Führendes Hash-Symbol überprüfen: Der Rechner akzeptiert #1E90FF und 1E90FF gleichermaßen, aber ein versehentliches Leerzeichen oder ein anderes Symbol (wie ein Doppelpunkt) bricht die Analyse. Kopieren Sie den Code direkt aus Ihrer CSS-Datei, um Übertragungsfehler zu vermeiden.
• Zwischenergebnisse nicht runden: Dieser Konverter arbeitet nur mit ganzen Zahlen – es gibt keine Brüche im Hex. Wenn Sie das Ergebnis manuell überprüfen, runden Sie niemals die Umrechnung der ersten Ziffer separat. Zum Beispiel für FE: Runden Sie 15 nicht auf 16; der Wert ist exakt (15×16)+14 = 254.
• Gültigen Bereich (0–255) prüfen: Jeder gültige sechsstellige Hex-Code bildet genau eine ganze Zahl zwischen 0 und 255 pro Kanal ab. Wenn Sie eine Ausgabe wie 256 oder −1 sehen, war Ihre Eingabe fehlerhaft (z. B. Zeichen wie G oder Z oder nur eine Ziffer).
• Auf Groß-/Kleinschreibung achten: Hex-Ziffern sind nicht case-sensitive (ff entspricht FF), der Konverter behandelt beide jedoch identisch. Mischen Sie nur kein kleines l (Buchstabe L) mit der Ziffer 1 – sie sind nicht dasselbe.
• Keine Alpha-Werte einbeziehen: Das Tool konvertiert nur RGB, nicht RGBA. Wenn Sie einen Hex-Code mit einem zusätzlichen Paar für Transparenz haben (z. B. #80FF0000), ignoriert der Rechner die letzten beiden Ziffern oder gibt einen Fehler zurück. Verwenden Sie dafür einen speziellen RGBA-Konverter.

Häufig gestellte Fragen

1. Wie konvertiere ich einen Hex-Code ohne das #-Symbol, wie „A0B1C2“?

Fügen Sie die sechs Zeichen direkt in das Eingabefeld ein. Der Konverter entfernt das # automatisch, falls vorhanden, funktioniert aber auch ohne. Für A0B1C2 teilt das Tool in A0, B1 und C2 auf und berechnet dann: A0 = (10×16)+0 = 160, B1 = (11×16)+1 = 177, C2 = (12×16)+2 = 194. Die Ausgabe ist rgb(160, 177, 194). Die einzige strikte Regel ist, dass Sie genau sechs hexadezimale Ziffern nach einem optionalen # haben müssen.

2. Was ist der Unterschied zwischen Hex (#FF0000) und RGB (255, 0, 0)?

Mathematisch gesehen keiner – es sind zwei Notationen für dieselbe Farbe. Das Hex-System verwendet die Basis 16, um die Zahlen zu komprimieren, während RGB dezimale Ganzzahlen verwendet. #FF0000 entspricht rgb(255, 0, 0), weil FF = (15×16)+15 = 255. Der praktische Unterschied liegt in der Kompatibilität: CSS, HTML und SVG akzeptieren beide. Einige ältere Systeme oder APIs (wie bestimmte JavaScript-Canvas-Methoden oder Hardware-Register) akzeptieren jedoch nur RGB-Ganzzahlen. Dieser Konverter existiert, um das genaue Ganzzahl-Tripel zu liefern, das Sie benötigen, ohne Potenzen von 16 manuell zu berechnen.

3. Kann der Konverter kurze Hex-Codes wie #FFF oder #123 verarbeiten?

Nein, das kann er nicht. Das Tool ist strikt für sechsstellige Codes ausgelegt. Die dreistellige Kurzschreibweise (#FFF) ist eine CSS-Komfortfunktion, bei der jede Ziffer verdoppelt wird (also wird #FFF zu #FFFFFF). Wenn Sie #FFF eingeben, lehnt der Konverter dies als ungültig ab, da er eine vollständige Drei-Paar-Struktur benötigt. Um den Rechner zu verwenden, müssen Sie es manuell erweitern: #FFF → #FFFFFF → rgb(255, 255, 255). Ebenso wird #123 → #112233 → rgb(17, 34, 51). Dies ist eine bewusste Designentscheidung, um Mehrdeutigkeiten zu vermeiden – das Tool geht nicht davon aus, dass Sie eine Verdopplung wünschen.