Hex in RGB umrechnen: Farbcodes von Hand oder im Code

Um Hex in RGB umzurechnen, teilst du den Code in drei Zeichenpaare, je eines für Rot, Grün und Blau, und wandelst jedes Paar von der Basis 16 in eine normale Zahl zwischen 0 und 255 um. Bei #7c3aed sind die Paare 7c, 3a und ed, daraus werden 124, 58 und 237, die Farbe ist also rgb(124 58 237). An der Farbe ändert sich nichts. Hex und RGB sind zwei Schreibweisen derselben drei Zahlen.

So ist ein Hex-Farbcode aufgebaut

Ein Hex-Code hat sechs Zeichen nach der Raute. Die ersten zwei sind der Rotkanal, die mittleren zwei Grün und die letzten zwei Blau. Jeder Kanal kann 256 Werte annehmen, von 0 (nichts von diesem Licht) bis 255 (alles davon). Zur Basis 16 lässt sich jeder dieser 256 Werte mit genau zwei Zeichen schreiben, deshalb wurde Hex zur kompakten Art, Farben im Web einzutippen. Für das größere Bild, wie diese Codes zusammenhängen, siehe Hex-Farbcodes erklärt.

Die Basis 16 zählt von 0 bis 9 und macht dann mit Buchstaben weiter. Das ist das Einzige, was du dir merken musst:

Hex von Hand in RGB umrechnen

Jedes Paar ist eine zweistellige Zahl zur Basis 16. Die linke Ziffer zählt Sechzehner, die rechte zählt Einer. Multipliziere die linke Ziffer mit 16, addiere die rechte, und du hast den Wert dieses Kanals.

1. 1

   Raute weglassen und in Paare teilen

   Aus #7c3aed werden 7c, 3a und ed. Das sind Rot, Grün und Blau in dieser Reihenfolge.

2. 2

   Das rote Paar umrechnen

   7c: 7 × 16 = 112, und c ist 12, also ist Rot 112 + 12 = 124.

3. 3

   Das grüne Paar umrechnen

   3a: 3 × 16 = 48, und a ist 10, also ist Grün 48 + 10 = 58.

4. 4

   Das blaue Paar umrechnen

   ed: e ist 14, 14 × 16 = 224, und d ist 13, also ist Blau 224 + 13 = 237.

5. 5

   Das Ergebnis schreiben

   Modernes CSS nimmt rgb(124 58 237). Die ältere Form mit Kommas, rgb(124, 58, 237), funktioniert weiterhin überall.

Zwei schnelle Kontrollen halten dich ehrlich. 00 ist immer 0 und ff immer 255, also ist jedes Paar, das mit einem Buchstaben von a bis f beginnt, 160 oder mehr, und jedes Paar, das mit 0 bis 7 beginnt, liegt unter 128. Kommt bei ed ein kleiner Wert heraus, hast du die Ziffern verkehrt herum gelesen.

Kurzformen und Alpha

Ein dreistelliger Code ist eine Abkürzung: Verdopple jede Ziffer, um den vollen Code zu bekommen. #f60 bedeutet #ff6600, also rgb(255 102 0). #fff ist Weiß und #000 Schwarz. Nur Farben, deren Paare jeweils eine Ziffer wiederholen, lassen sich so schreiben, #7c3aed hat also keine Kurzform.

Ein achtstelliger Code ergänzt ein viertes Paar für die Deckkraft. Es wird genauso umgerechnet, dann teilst du durch 255, um einen Bruch zu erhalten. #7c3aed80 endet auf 80, das ist 128, und 128 ÷ 255 ist etwa 0,5, also entspricht es rgb(124 58 237 / 50%). Ein vierstelliger Code wie #f608 ist die Kurzform derselben Idee.

.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}

Hex in RGB mit JavaScript

Im Code übernimmt parseInt mit der Basis 16 die Umrechnung für dich. Die Funktion unten akzeptiert drei-, vier-, sechs- und achtstellige Codes, mit oder ohne Raute, und gibt die Kanäle plus einen Alphawert zwischen 0 und 1 zurück.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }

RGB in Hex umrechnen

Der Rückweg ist eine Division. Teile den Kanal durch 16: Die ganze Zahl ist die erste Ziffer, der Rest die zweite. Bei 153 ergibt 153 ÷ 16 9 Rest 9, das Paar ist also 99. Bei 51 sind es 3 Rest 3, also 33, und 102 ergibt 6 Rest 6, also 66. Damit ist rgb(51 102 153) gleich #336699. In JavaScript erledigt das toString(16), mit Auffüllen, damit einstellige Werte ihre führende Null behalten:

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'

Wann Hex, RGB oder etwas anderes passt

Hex ist kompakt und lässt sich leicht zwischen Tools kopieren, deshalb nutzen es Markenrichtlinien und Designdateien. RGB ist leichter zu durchschauen, wenn du im Code einen Kanal ändern oder Transparenz ergänzen musst. Keines von beiden taugt für die Fragen, die Designer wirklich stellen, etwa „mach das etwas heller“ oder „finde eine weichere Version dieses Blaus“. Dafür beschreiben HSL-Farben und OKLCH Farben über Farbton und Helligkeit, sodass sich kleine Änderungen vorhersehbar verhalten.

Für den Druck zählt noch ein Unterschied. Hex und RGB beschreiben Licht auf einem Bildschirm, ein Drucker muss sie also in Farbe übersetzen, und sehr leuchtende Bildschirmfarben können auf Papier matter werden. RGB vs. CMYK erklärt, was dich erwartet. Auf dem Bildschirm sind die umgerechneten Farben identisch, und wenn eine Farbe ausblenden soll, schreibst du die Alpha-Formen von oben; transparente Verläufe in CSS zeigt sie in Aktion.

Bevor du eine umgerechnete Farbe als Textfarbe einsetzt, prüfe sie mit einem Kontrastprüfer gegen ihren Hintergrund. In Gradiently brauchst du das selten: Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks, damit die Wörter lesbar sind.