Hexadezimalsystem verstehen: Wie aus #FF5733 RGB-Werte werden

Ein HEX-Farbcode wie #FF5733 wirkt auf den ersten Blick wie ein zufaelliger Code, ist aber eine sehr kompakte Zahl: Er kodiert drei Bytes, je eines fuer Rot, Gruen und Blau. Wer das Hexadezimalsystem versteht, sieht in #FF5733 sofort die RGB-Werte rgb(255, 87, 51) und durchschaut, warum jeder Kanal genau zwei Stellen hat, weshalb Werte nur von 0 bis 255 reichen und wo beim Alpha-Kanal kleine Rundungsfehler entstehen. Dieser Ratgeber erklaert die Mathematik dahinter so, dass du jeden Code im Kopf zerlegen kannst.

Das Hexadezimalsystem in einer Minute

Unser Alltagssystem ist dezimal, also zur Basis 10. Es kennt zehn Ziffern (0 bis 9), und jede Stelle nach links wiegt zehnmal mehr als die vorige. Das Hexadezimalsystem arbeitet stattdessen zur Basis 16. Es braucht sechzehn Symbole, und weil uns nach der 9 die Ziffern ausgehen, kommen die Buchstaben A bis F hinzu. Sie stehen fuer die Werte 10 bis 15.

Jede Stelle in einer Hexadezimalzahl wiegt das Sechzehnfache der rechts daneben. Die rechte Stelle zaehlt einfach (16 hoch 0 = 1), die naechste zaehlt sechzehnfach (16 hoch 1 = 16), die uebernaechste 256-fach (16 hoch 2). Genau diese Stellenwerte braucht man, um einen Farbcode umzurechnen.

Die folgende Tabelle ist das gesamte Vokabular, das du brauchst. Sie zeigt jede der sechzehn Hexadezimalziffern mit ihrem Dezimalwert und ihrer Vier-Bit-Darstellung:

Warum ein Byte genau zwei Hex-Ziffern braucht

Computer speichern Farbkanaele in Bytes. Ein Byte besteht aus acht Bit, und acht Bit ergeben 2 hoch 8, also 256 moegliche Zustaende. Gezaehlt von null aus ist das der bekannte Wertebereich 0 bis 255. Eine einzelne Hexadezimalziffer deckt 16 Werte ab (vier Bit). Zwei Ziffern nebeneinander decken 16 mal 16 = 256 Werte ab, also exakt einen vollen Byte-Bereich von 00 bis FF.

Diese saubere Eins-zu-eins-Beziehung ist der eigentliche Grund, warum Farbcodes hexadezimal notiert werden und nicht dezimal: Jede Hex-Ziffer entspricht genau einem Halb-Byte (englisch Nibble). Die linke Ziffer beschreibt die oberen vier Bit, die rechte die unteren vier Bit. FF setzt alle acht Bit auf 1 und ergibt damit 255, 00 setzt alles auf 0.

Schritt fuer Schritt: #FF5733 zerlegen

Jetzt wenden wir die Stellenwert-Regel auf einen echten Farbcode an. Die Formel fuer jedes Zeichenpaar lautet: linke Ziffer mal 16 plus rechte Ziffer. Wir rechnen #FF5733 von Hand:

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

Drei-, sechs- und achtstellige Codes im Vergleich

HEX-Codes kommen in mehreren Laengen vor, die alle in der W3C-Spezifikation CSS Color Module Level 4 definiert sind. Die Laenge entscheidet, wie viele Bit pro Kanal zur Verfuegung stehen und ob ein Alpha-Kanal enthalten ist:

Die Kurzformen sind reine Schreiberleichterungen. Eine dreistellige Form kann nur 16 mal 16 mal 16 = 4.096 Farben darstellen, eine sechsstellige dagegen 16,7 Millionen (256 hoch 3). Wer eine Farbe wie #FA7B12 hat, kann sie nicht verlustfrei kuerzen, weil die beiden Stellen jedes Kanals nicht gleich sind.

Der Alpha-Kanal und der Rundungsfehler

Bei achtstelligen Codes beschreiben die letzten beiden Stellen die Deckkraft, ebenfalls als Byte von 00 (vollstaendig transparent) bis FF (vollstaendig deckend). Das Problem: In CSS und in Design-Tools wird Alpha oft als Dezimalzahl zwischen 0 und 1 oder als Prozent erwartet. Diese Umrechnung ist nicht immer glatt.

CC ist hexadezimal 204. Geteilt durch 255 ergibt das 0,80000..., also genau 0,8, weil 204/255 sich kuerzen laesst. Anders sieht es bei 80 aus: Das ist 128, und 128/255 ergibt 0,50196..., also nicht exakt die Haelfte. Wer eine Deckkraft von 50 Prozent als HEX schreiben will, muss runden, und 0,5 mal 255 = 127,5 wird je nach Tool zu 127 (7F) oder 128 (80). Genau hier entstehen die typischen Rundungsabweichungen zwischen verschiedenen Programmen.

Die Umrechnung im Code nachvollziehen

In JavaScript erledigt parseInt mit der Basis 16 die Stellenwert-Rechnung automatisch. Fuer den Alpha-Kanal teilt man den Byte-Wert durch 255 und rundet auf zwei Nachkommastellen, um die typische CSS-Darstellung zu erhalten:

function hexToRgba(hex) {
  hex = hex.replace('#', '');
  // 3- und 4-stellige Kurzform auf volle Laenge bringen
  if (hex.length === 3 || hex.length === 4) {
    hex = hex.split('').map(c => c + c).join('');
  }
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return `rgba(${r}, ${g}, ${b}, ${Math.round(a * 100) / 100})`;
  }
  return `rgb(${r}, ${g}, ${b})`;
}

hexToRgba('#FF5733');   // "rgb(255, 87, 51)"
hexToRgba('#F53');      // "rgb(255, 85, 51)"
hexToRgba('#FF5733CC'); // "rgba(255, 87, 51, 0.8)"

Der entscheidende Punkt ist der zweite Parameter 16 bei parseInt: Er teilt der Funktion mit, dass der Text als Hexadezimalzahl gelesen werden soll. Ohne ihn wuerde ein Paar wie FF gar nicht als Zahl erkannt.

Haeufige Fragen

Quellen

• W3C: CSS Color Module Level 4, Hex-Notation, Definition der 3-, 4-, 6- und 8-stelligen Schreibweise samt Alpha.
• MDN Web Docs: hexadezimale Farbangabe mit den Regeln zur Kurzschreibweise.
• MDN Web Docs: Glossar Hexadezimalsystem und Byte.
• MDN Web Docs: parseInt() mit Radix-Parameter.