HEX in RGB umrechnen: Die einfache Anleitung mit Beispielen

Ein HEX-Code wie #FF5733 und der RGB-Wert rgb(255, 87, 51) beschreiben exakt dieselbe Farbe, nur in einer anderen Schreibweise. Um HEX in RGB umzurechnen, teilst du den sechsstelligen Code in drei Paare auf und wandelst jedes Paar von einer Hexadezimalzahl in eine Dezimalzahl zwischen 0 und 255 um. Wie das genau geht, warum es funktioniert und wie du Sonderfaelle wie dreistellige oder achtstellige Codes loest, zeigt dieser Ratgeber Schritt fuer Schritt.

Was ein HEX-Farbcode eigentlich ist

HEX steht fuer hexadezimal, also das Zahlensystem zur Basis 16. Waehrend wir im Alltag mit zehn Ziffern (0 bis 9) rechnen, nutzt das Hexadezimalsystem sechzehn Symbole: die Ziffern 0 bis 9 und zusaetzlich die Buchstaben A bis F. Dabei steht A fuer 10, B fuer 11, und so weiter bis F fuer 15.

Ein HEX-Farbcode beginnt mit einem Rautezeichen und enthaelt danach in der Regel sechs Zeichen, zum Beispiel #FF5733. Diese sechs Zeichen sind drei Paare, und jedes Paar beschreibt die Intensitaet eines der drei Grundfarbkanaele: Rot, Gruen und Blau. Genau das ist auch die Bedeutung von RGB. HEX ist also nichts anderes als eine kompakte Schreibweise fuer dieselben drei RGB-Werte.

Warum die Werte zwischen 0 und 255 liegen

Jeder der drei Farbkanaele wird in einem Byte gespeichert, also in acht Bit. Acht Bit koennen 2 hoch 8, also 256 verschiedene Zustaende annehmen. Gezaehlt von null aus ergibt das den Wertebereich 0 bis 255. Dieselbe Zahl laesst sich mit genau zwei Hexadezimalziffern darstellen: 00 ist der kleinste Wert (0), FF der groesste (255). Deshalb passt ein Zweier-Paar im HEX-Code perfekt auf einen RGB-Kanal.

0 bedeutet, dass der Kanal komplett aus ist, 255 bedeutet volle Intensitaet. #000000 ist also Schwarz (alles aus), #FFFFFF ist Weiss (alles voll), und #FF0000 ist reines Rot.

Schritt fuer Schritt: HEX in RGB umrechnen

Wir rechnen den Code #FF5733 von Hand um. Du brauchst nur die Regel, dass eine zweistellige Hexadezimalzahl so berechnet wird: erste Ziffer mal 16 plus zweite Ziffer. Die Buchstaben A bis F stehen dabei fuer 10 bis 15.

1. Code in drei Paare teilen: FF, 57 und 33.
2. Rot berechnen (FF): F ist 15. Also 15 mal 16 plus 15 = 240 plus 15 = 255.
3. Gruen berechnen (57): 5 mal 16 plus 7 = 80 plus 7 = 87.
4. Blau berechnen (33): 3 mal 16 plus 3 = 48 plus 3 = 51.
5. Ergebnis zusammensetzen: rgb(255, 87, 51).

Umrechnung im Code: ein kurzes Beispiel

Wer programmiert, ueberlaest die Rechnung dem Rechner. In JavaScript zerlegt man den String und nutzt parseInt mit der Basis 16:

function hexToRgb(hex) {
  hex = hex.replace('#', '');
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

hexToRgb('#FF5733'); // "rgb(255, 87, 51)"

Der zweite Parameter 16 bei parseInt ist entscheidend: Er sagt der Funktion, dass der Text als Hexadezimalzahl zu lesen ist. Ohne ihn wuerde FF nicht erkannt werden.

Haeufige Beispiele in der Uebersicht

Einige Farben tauchen so oft auf, dass sich ihre Werte einpraegen. Die folgende Tabelle zeigt gaengige HEX-Codes mit ihren RGB-Werten:

Sonderfaelle: drei- und achtstellige HEX-Codes

Neben dem klassischen sechsstelligen Code gibt es zwei wichtige Varianten, die man kennen sollte.

Dreistellige Kurzschreibweise

Ein dreistelliger Code wie #F53 ist eine Abkuerzung. Jede Ziffer wird verdoppelt, um auf die volle Form zu kommen: F wird zu FF, 5 wird zu 55, 3 wird zu 33. Aus #F53 entsteht also #FF5533 und damit rgb(255, 85, 51). Die Kurzform funktioniert laut der W3C-Spezifikation CSS Color Module nur, wenn beide Stellen jedes Kanals gleich waeren.

Achtstellige Codes mit Alpha-Kanal

Ein achtstelliger Code wie #FF5733CC enthaelt am Ende zwei zusaetzliche Stellen fuer den Alpha-Kanal, also die Deckkraft. CC ist hexadezimal 204. Geteilt durch 255 ergibt das rund 0,80. In CSS schreibt man die Farbe dann als rgba(255, 87, 51, 0.8), also mit 80 Prozent Deckkraft. Bei vierstelligen Codes (z.B. #F53C) gilt wieder die Verdopplungsregel auch fuer den Alpha-Wert.

RGB sauber in CSS einsetzen

In modernem CSS gibt es zwei Schreibweisen fuer RGB. Die klassische Variante nutzt Kommas, die in CSS Color Level 4 eingefuehrte moderne Variante trennt mit Leerzeichen und nutzt einen Schraegstrich vor dem Alpha-Wert:

/* klassisch */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.8);

/* modern (CSS Color Level 4) */
color: rgb(255 87 51);
color: rgb(255 87 51 / 80%);

Beide Schreibweisen werden von allen aktuellen Browsern unterstuetzt. RGB lohnt sich besonders dann, wenn du die Deckkraft brauchst oder Farben in CSS-Variablen flexibel weiterverarbeiten willst.

Haeufige Fragen

Quellen

• W3C: CSS Color Module Level 4, Definition der HEX-, RGB- und Alpha-Notation.
• MDN Web Docs: hexadezimale Farbangabe und rgb()-Funktion.
• MDN Web Docs: parseInt() mit Radix-Parameter.