HEX zu RGB: Der vollständige Konvertierungsleitfaden

Jede Farbe auf einem Bildschirm besteht im Kern aus drei Zahlen: Rot, Grün und Blau. Die Frage ist nur, wie diese Zahlen geschrieben werden. Die HEX-Notation verpackt sie in eine sechsstellige Zeichenkette, die Designern und Entwicklern vertraut ist. Die RGB-Notation entpackt sie in drei explizite Werte für CSS-Funktionen, Design-Tokens und Datenpipelines.

Dieser Leitfaden deckt das vollständige Bild ab — die Mathematik hinter der hexadezimalen Kodierung, das RGB-Modell, eine schrittweise manuelle Konvertierung und die praktischen Regeln für die Wahl zwischen HEX und RGB in echten CSS- und Design-Workflows.

Wie hexadezimale Kodierung funktioniert

Hexadezimal ist ein Zahlensystem zur Basis 16, das die Ziffern 0–9 und die Buchstaben A–F verwendet, wobei A=10, B=11, C=12, D=13, E=14, F=15. Ein zweistelliges Hex-Paar kann Werte von 00 (0 dezimal) bis FF (255 dezimal) darstellen. Das ist genau der Bereich für einen einzelnen Farbkanal. Ein sechsstelliger HEX-Code wie #3A7BD5 besteht aus drei Paaren: 3A (Rot), 7B (Grün), D5 (Blau). Das #-Präfix ist eine CSS-Konvention. Kurzform-Codes wie #FFF werden zu #FFFFFF expandiert — jede Ziffer wird verdoppelt.

Das RGB-Farbmodell

RGB steht für Rot, Grün, Blau — die drei Primärkanäle der additiven Farbmischung, die jedes digitale Display verwendet. Jeder Kanal reicht von 0 (kein) bis 255 (Maximum). rgb(0, 0, 0) ist reines Schwarz; rgb(255, 255, 255) ist reines Weiß. Das Modell ist additiv: volles Rot und volles Grün gemischt ergibt Gelb (rgb(255, 255, 0)). CSS akzeptiert auch die moderne Syntax ohne Kommas: color: rgb(58 123 213).

Manuelle Konvertierung Schritt für Schritt

Um #3A7BD5 in RGB umzuwandeln: Teile in Paare 3A, 7B, D5 auf. Konvertiere jedes Paar von Hex nach Dezimal. Für 3A: 3 × 16 + 10 = 58. Für 7B: 7 × 16 + 11 = 123. Für D5: 13 × 16 + 5 = 213. Ergebnis: rgb(58, 123, 213). Für die Umkehrung: Teile jeden Dezimalwert durch 16, nimm den Quotienten als erste Hex-Ziffer und den Rest als zweite.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Ergebnis: rgb(58, 123, 213)

HEX vs RGB in CSS: wann welches verwenden

HEX ist kompakt und universell unterstützt. Verwende es für statische Farbwerte in CSS, Design-Systemen und überall dort, wo Kürze wichtig ist. RGB ist vorzuziehen, wenn du die Farbe in JavaScript oder mit calc() in CSS manipulieren musst. CSS-Custom-Properties funktionieren mit beiden gleich gut: --brand: #3A7BD5 oder --brand: rgb(58 123 213).

Alphakanal: HEX8 vs rgba()

Transparenz wird in jedem Format unterschiedlich hinzugefügt. In HEX hänge zwei weitere Hex-Ziffern für Alpha an: #3A7BD5FF ist vollständig undurchsichtig, #3A7BD580 ist 50% transparent. In CSS war rgba() der traditionelle Ansatz: rgba(58, 123, 213, 0.5). Modernes CSS erlaubt auch rgb() mit einem optionalen Alpha: rgb(58 123 213 / 0.5). HEX8 wird in allen modernen Browsern unterstützt, ist aber weniger lesbar.

Praktische Anwendungsfälle

Design-Tokens speichern Farben typischerweise in HEX für die Portabilität zwischen Tools (Figma, Storybook, Style Dictionary). CSS-Variablen können beide Formate enthalten. Wenn Farben an die Canvas API oder WebGL-Shader übergeben werden, werden RGB-Werte benötigt — der HEX-String muss zuerst mit parseInt("3A", 16) geparst werden. Für CSS-Animationen mit color-mix() oder @property-Übergängen bietet das rgb()- oder hsl()-Format den Browsern mehr Interpolationsflexibilität.

Häufig gestellte Fragen