HEX-zu-RGB-Konverter

So funktioniert die Umrechnung von HEX in RGB

Ein HEX-Farbcode ist nichts weiter als drei Zahlen in hexadezimaler Schreibweise (Basis 16). Die sechs Ziffern nach dem # zerfallen in drei Paare – RR, GG, BB – und jedes Paar steht für die Menge an rotem, grünem und blauem Licht auf einer Skala von 00 (0) bis ff (255). In RGB umzurechnen heißt schlicht, jedes Paar als Dezimalzahl zu lesen.

Nimm #3564c4: Das Rot-Paar 35 ist 3×16 + 5 = 53, das Grün-Paar 64 ist 6×16 + 4 = 100, und das Blau-Paar c4 ist 12×16 + 4 = 196. Das Ergebnis lautet rgb(53, 100, 196). Die Umrechnung ist in beide Richtungen exakt – HEX und RGB sind zwei Schreibweisen desselben 8-Bit-Werts, es wird also nichts gerundet und geht nichts verloren.

Kurzschreibweise, Groß- und Kleinschreibung und das fehlende „#“

Dreistellige Codes wie #f60 sind eine Kurzschreibweise: Jede Ziffer wird verdoppelt, #f60 wird also zu #ff6600 – rgb(255, 102, 0). Groß- und Kleinschreibung spielt nie eine Rolle (#3564C4 und #3564c4 sind identisch), und dieser Konverter akzeptiert auch Codes ohne führendes #, weil sie aus Chatnachrichten und Tabellen häufig genau so ankommen.

Transparenz: 8-stelliges HEX und rgba()

Modernes CSS erlaubt ein viertes Paar für Alpha: #3564c480 ist dasselbe Blau mit 50 % Deckkraft, denn 80 entspricht 128, und 128 ÷ 255 ≈ 0,5. In RGB-Notation wird daraus rgba(53, 100, 196, 0.5). Vorsicht beim Kopieren zwischen Plattformen: CSS und die meisten Web-Tools setzen Alpha nach hinten (#RRGGBBAA), Android historisch nach vorn (#AARRGGBB) – fügst du das eine ins andere ein, tauschst du klammheimlich den Rot-Kanal gegen die Transparenz.

Häufige Umrechnungen

Wo du wirklich RGB statt HEX brauchst

• Canvas- und WebGL-Code – Pixel-APIs liefern dir rohe Kanalwerte von 0–255, keine HEX-Strings.
• Alpha in älterem CSS – bevor 8-stelliges HEX vollständig unterstützt wurde, war rgba() die einzige Möglichkeit, Transparenz zu schreiben.
• Native Entwicklung – iOS-UIColor und viele Game-Engines erwarten die Kanäle als Fließkommazahlen von 0 bis 1: Teile dazu jeden RGB-Wert durch 255 (53 ÷ 255 ≈ 0,208).
• Design-Übergaben – Druck- und Markenrichtlinien führen RGB oft direkt neben CMYK und Pantone-artigen Referenzen auf.

Häufige Fehler, die du vermeiden solltest

• Fünf- oder siebenstellige Codes sind ungültig – erlaubt sind 3, 4, 6 oder 8 Ziffern nach dem #.
• Die Zeichen müssen 0–9 und a–f sein. Ein Code wie #12g45z scheitert, weil g und z nicht hexadezimal sind.
• RGB-Kanäle enden bei 255. Liefert eine Formel 256 oder −1, ist weiter oben etwas abgeschnitten oder übergelaufen.
• Verwechsle rgb(53, 100, 196) nicht mit Prozentangaben – rgb(20%, 39%, 77%) ist ebenfalls gültiges CSS, aber eine andere Schreibweise derselben Idee.

Alles auf dieser Seite läuft lokal in deinem Browser – Farben, die du eingibst, gehen nie an einen Server. Du brauchst die Gegenrichtung? Dafür gibt es den RGB-zu-HEX-Konverter, und für Ausgaben in Lab, LCH und OKLCH den universellen Farbkonverter.