HEX zu RGB vs. RGB zu HEX: Workflow fuer CSS-Entwickler

HEX und RGB sind zwei Schreibweisen fuer dieselbe Farbe, doch im Alltag eines CSS-Entwicklers fuehlt sich der Wechsel oft wie ein Bruch an: Der Designer liefert #1A56DB, das Theme erwartet aber drei Kanalwerte, und der Linter meckert ueber die Alpha-Syntax. Dieser Leitfaden zeigt den bidirektionalen Workflow sauber von beiden Seiten: wann Sie HEX zu RGB rechnen, wann den Rueckweg gehen, und wie Sie beide Formate ueber Designtokens und Tailwind-Variablen so verbinden, dass es nur eine Quelle der Wahrheit gibt.

Beide Richtungen verstehen: dieselbe Farbe, zwei Notationen

Ein Sechs-Zeichen-HEX-Code besteht aus drei Paaren von Hexadezimalziffern, je eines fuer Rot, Gruen und Blau. Jedes Paar deckt den Bereich 00 bis FF ab, also dezimal 0 bis 255. HEX zu RGB bedeutet schlicht: jedes Paar von der Basis 16 in die Basis 10 umrechnen. RGB zu HEX ist der Rueckweg, also jeden Kanal von 0 bis 255 als zweistellige Hex-Zahl darstellen, notfalls mit fuehrender Null.

Wichtig ist die Einsicht, dass keine der beiden Richtungen Information hinzufuegt oder entfernt. Es gibt genau 256 Werte pro Kanal, und zwei Hex-Ziffern kodieren genau 256 Zustaende (16 mal 16). Die Abbildung ist also bijektiv, der Roundtrip verlustfrei. Rundungsfehler tauchen erst auf, wenn ein drittes Format wie HSL dazwischengeschaltet wird oder ein Alpha-Wert in Prozent gespeichert wird. Wer das verinnerlicht, hoert auf, sich Sorgen ueber Genauigkeit zu machen, und konzentriert sich auf den eigentlichen Punkt: Lesbarkeit und Wartbarkeit im Code.

Welche Richtung wann? Entscheidungshilfe fuer die Praxis

In der Praxis bestimmt nicht die Mathematik, sondern der Kontext, welche Notation gewinnt. HEX ist die Notation des Austauschs: Design-Tools wie Figma, Style-Guides und Brand-Manuals liefern Farben als HEX, weil sich ein Sechs-Zeichen-String leicht kopieren und im Chat verschicken laesst. RGB dagegen ist die Notation der Verarbeitung: Sobald Sie an einzelnen Kanaelen rechnen, Transparenz anlegen oder Farben animieren, sind drei separate Zahlen praktischer.

Designtokens: eine Quelle der Wahrheit fuer beide Formate

Das groesste Problem in gewachsenen Codebasen ist nicht die Umrechnung selbst, sondern die Duplikation: Dieselbe Markenfarbe steht als #1A56DB im Header, als rgb(26,86,219) im Button und als rgba(26,86,219,.5) im Overlay. Aendert sich die Marke, muessen Sie drei Stellen finden. Die Loesung ist, die Farbe genau einmal als Kanaltripel in einer CSS Custom Property zu speichern und beide Formate daraus abzuleiten.

:root {
  /* Quelle der Wahrheit: reine RGB-Kanaele, keine rgb()-Huelle */
  --brand-rgb: 26 86 219;        /* aus #1A56DB per HEX zu RGB */
  --ink-rgb:   15 23 42;
}

.button {
  background: rgb(var(--brand-rgb));            /* deckend */
}
.overlay {
  background: rgb(var(--brand-rgb) / 0.5);      /* 50% Alpha, ein Token */
}
.button:focus-visible {
  outline: 2px solid rgb(var(--brand-rgb) / 0.6);
}

Der Trick steckt in der Speicherung ohne rgb()-Huelle. Weil die Property nur die drei Zahlen 26 86 219 enthaelt, koennen Sie sie sowohl deckend als auch mit beliebigem Alpha einsetzen, ohne den Wert zu duplizieren. Den passenden HEX-Code halten Sie nur noch als Kommentar oder im Style-Guide. So bleibt die Umrechnung HEX zu RGB ein einmaliger Schritt beim Anlegen des Tokens, nicht etwas, das sich durch den gesamten Code zieht.

Tailwind CSS: warum die Kanalwerte ohne rgb() gehoeren

Tailwind nutzt genau dieses Prinzip, weshalb es ein haeufiger Stolperstein ist. Wer einen fertigen rgb(26,86,219)-String in die Theme-Konfiguration schreibt, bricht die Opacity-Utilities. Tailwind setzt naemlich intern den Platzhalter <alpha-value> ein, und der funktioniert nur mit nackten Kanalwerten.

/* tailwind theme (CSS-first, Tailwind v4) */
@theme {
  --color-brand: rgb(26 86 219);   /* Tailwind v4 akzeptiert das */
}

/* In Tailwind v3 (JS-Config) dagegen NUR die Kanaele: */
// colors: { brand: 'rgb(<alpha-value> ... )' }  -> falsch
// theme.extend.colors.brand = '26 86 219'              -> richtig

/* Ergebnis im Markup, Opacity funktioniert automatisch: */
<div class="bg-brand text-white">deckend</div>
<div class="bg-brand/50">50% transparent</div>

Merksatz: Tailwind will die Zahlen, nicht die Verpackung. Sobald Sie eine Markenfarbe als HEX bekommen, rechnen Sie sie einmal in die drei Kanaele um, tragen diese ins Theme ein, und alle Opacity-Varianten von bg-brand/10 bis bg-brand/90 entstehen ohne weitere Arbeit. Genau hier zahlt sich ein verlaesslicher Converter aus, der Ihnen das Kanaltripel direkt kopierbar ausgibt.

Konkretes Beispiel: ein Roundtrip von Hand nachgerechnet

Nehmen wir #1A56DB und zerlegen den Code Paar fuer Paar. Hex 1A bedeutet 1 mal 16 plus 10, also 26. Hex 56 bedeutet 5 mal 16 plus 6, also 86. Hex DB bedeutet 13 mal 16 plus 11, also 219. Damit ist das Ergebnis rgb(26, 86, 219). Den Rueckweg gehen Sie, indem Sie jeden Wert durch 16 teilen: 26 ergibt 1 Rest 10, also 1A. So schliesst sich der Kreis.

// HEX zu RGB
const hexToRgb = (hex) => {
  const h = hex.replace('#', '');
  return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16));
};
hexToRgb('#1A56DB'); // -> [26, 86, 219]

// RGB zu HEX
const rgbToHex = (r, g, b) =>
  '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
rgbToHex(26, 86, 219); // -> "#1A56DB"

Das padStart(2, '0') ist die haeufigste Fehlerquelle in eigenen Implementierungen: Ohne fuehrende Null wird aus dem Kanalwert 5 die Hex-Ziffer 5 statt 05, und der gesamte Code verschiebt sich. Genau solche Kleinigkeiten nimmt Ihnen ein Converter ab, der beide Richtungen samt Normalisierung von drei- und achtstelligen Codes erledigt.

Tooling-Vergleich: Converter, Editor und Browser-DevTools

Fuer den taeglichen Workflow stehen drei Werkzeugklassen bereit, die sich ergaenzen statt ausschliessen. Ein Online-Converter ist am schnellsten fuer einen einzelnen, sauber kopierbaren Wert samt Alpha-Normalisierung. Der Editor mit Color-Plugin zeigt die Farbe inline und konvertiert per Kontextmenue, ist aber an die Datei gebunden. Die Browser-DevTools schliesslich erlauben es, im laufenden Layout zwischen den Formaten zu klicken, eignen sich aber nicht zum dauerhaften Festhalten.

In der modernen CSS Color Syntax (Level 4) duerfen Sie uebrigens kommagetrennte und leerzeichengetrennte Schreibweisen frei waehlen: rgb(26 86 219) ist gleichwertig zu rgb(26, 86, 219). Fuer den Token-Workflow ist die Leerzeichen-Form mit Schraegstrich-Alpha die bessere Wahl, weil sie sich nahtlos mit Custom Properties kombinieren laesst.

Haeufige Fragen zum HEX- und RGB-Workflow

Quellen und weiterfuehrende Spezifikationen

• W3C: CSS Color Module Level 4 (Definition der rgb()-Syntax und Alpha-Notation)
• MDN Web Docs: rgb()-Farbfunktion (Legacy- und moderne Syntax im Vergleich)
• MDN Web Docs: hexadezimale Farbnotation (3-, 6- und 8-stellige HEX-Codes)
• MDN Web Docs: CSS Custom Properties (Grundlage fuer Designtokens)

Verwandte Artikel