HEX-zu-RGB-Konverter

So rechnen Sie HEX in RGB um

HEX in RGB umzurechnen heißt, den Code in Paare zu teilen und jedes Paar vom Hexadezimal- ins Dezimalsystem zu übertragen. Das erste Paar ist Rot, das zweite Grün und das dritte Blau. Jedes Paar reicht von 00 bis FF, also von 0 bis 255.

#5271FF  →  52  71  FF
52 = 5 × 16 + 2   = 82
71 = 7 × 16 + 1   = 113
FF = 15 × 16 + 15 = 255
rgb(82 113 255)

Die Rechnung für jedes Paar lautet linke Ziffer × 16 + rechte Ziffer. Die Ziffern A bis F stehen für 10 bis 15 (A ist 10, B ist 11, C ist 12, D ist 13, E ist 14 und F ist 15), und die ASCII-Tabelle zeigt jedes Zeichen mit seinem Code dezimal und hexadezimal. Ein zweites Beispiel, mit einem Nullpaar:

#FF8000  →  FF  80  00
FF = 255
80 = 8 × 16 + 0 = 128
00 = 0
rgb(255 128 0)

Da FF das größte mögliche Paar ist, ist der größte Kanal 255. Und 00 ergibt immer 0. Man kann sogar im Kopf schätzen: Die erste Ziffer jedes Paars liefert den Großteil des Werts. In 5271FF ist Rot niedrig (5), Grün mittel (7) und Blau am Maximum (F), die Farbe ist also ein kräftiges Blau.

HEX mit 3 und 4 Stellen

Kurzes HEX verdoppelt jede Ziffer: #f00 ist dasselbe wie #ff0000 und #abc wird zu #aabbcc. Kürzen lässt sich nur, wenn beide Ziffern jedes Paars gleich sind, deshalb hat #5271FF keine Kurzform.

#f00   →  #ff0000  →  rgb(255 0 0)
#abc   →  #aabbcc
#f008  →  #ff000088

Mit 4 Stellen gilt dieselbe Regel, und die letzte Ziffer ist die Transparenz: #f008 ist #ff000088. Das Format ist gültiges CSS, aber älterer Code erkennt es womöglich nicht. Prüfen Sie das, bevor Sie es außerhalb eines Stylesheets verwenden.

HEX mit 8 Stellen und Transparenz

Im HEX mit 8 Stellen ist das letzte Paar der Alphakanal, der die Deckkraft steuert: 00 ist vollständig transparent und FF vollständig deckend. Für rgba() wandeln Sie das Paar in eine Dezimalzahl um und teilen durch 255.

#5271FF80  →  52  71  FF  80
80 = 8 × 16 + 0 = 128
128 ÷ 255 = 0.50196…  →  0.5
rgba(82, 113, 255, 0.5)
rgb(82 113 255 / 50%)

Deshalb entspricht 80 nur ungefähr 0,5: 128 ÷ 255 ergibt 0,50196. Das Tool rundet auf 2 Nachkommastellen und zeigt 0.5, so wie Sie es in CSS schreiben würden.

rgb() und rgba() im aktuellen CSS

Die aktuelle rgb()-Syntax trennt die Kanäle mit Leerzeichen und setzt die Transparenz hinter einen Schrägstrich: rgb(82 113 255 / 50%). Die alte verwendet Kommas und den Namen rgba(): rgba(82, 113, 255, 0.5). Heute funktionieren beide mit und ohne Alpha. Das Tool zeigt beide an, damit Sie die kopieren können, die Ihr Projekt nutzt.

color: rgb(82 113 255);
color: rgb(82 113 255 / 50%);
color: rgba(82, 113, 255, 0.5);

Die Unterstützungsdaten stammen von MDN (browser-compat-data, geprüft am 5. November 2026): Die Syntax mit Leerzeichen funktioniert ab Chrome 65, Firefox 52 und Safari 12.1, HEX mit 4 und 8 Stellen ab Chrome 62, Firefox 49 und Safari 10. Die Syntaxregeln stehen in der W3C-Spezifikation CSS Color 4, die Nutzungsdokumentation bei rgb() bei MDN und hex-color bei MDN.

In der Praxis ist HEX für einfarbige Flächen kürzer und wird von Design-Tools exportiert. RGB mit Alpha hält die Transparenz lesbar (50% statt 80) und lässt sich in JavaScript leichter berechnen. Die Farbe auf dem Bildschirm ist in beiden Fällen dieselbe.

HEX in RGB im Code umrechnen

In JavaScript wandelt parseInt(paar, 16) jedes Paar um. Die Funktion unten akzeptiert 3, 4, 6 und 8 Stellen, mit oder ohne #:

function hexToRgb(hex) {
  let digits = hex.trim().replace(/^#/, "");

  if (digits.length <= 4) {
    digits = [...digits].map((digit) => digit + digit).join("");
  }

  if (![6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) {
    return null;
  }

  const [r, g, b, a = 255] = digits
    .match(/../g)
    .map((pair) => parseInt(pair, 16));

  return { r, g, b, a: Math.round((a / 255) * 100) / 100 };
}

hexToRgb("#5271FF");   // { r: 82, g: 113, b: 255, a: 1 }
hexToRgb("#f008");     // { r: 255, g: 0, b: 0, a: 0.53 }

In Python wandelt int(paar, 16) ein Paar um, und bytes.fromhex den ganzen Code auf einmal:

def hex_to_rgb(value: str) -> tuple[int, ...]:
    digits = value.lstrip("#")

    if len(digits) in (3, 4):
        digits = "".join(digit * 2 for digit in digits)

    return tuple(bytes.fromhex(digits))

hex_to_rgb("#5271FF")   # (82, 113, 255)
hex_to_rgb("#5271FF80") # (82, 113, 255, 128)
int("52", 16)           # 82

Validieren Sie vor dem Umrechnen. Ohne Prüfung liefert parseInt('zz', 16) den Wert NaN, und der Fehler fällt erst später auf, wenn die Farbe im CSS zu rgb(NaN NaN NaN) wird.

Häufige Fehler beim Einfügen von HEX

Wenn die Umrechnung fehlschlägt, liegt es fast immer an einem dieser Gründe:

• Zu viele oder zu wenige Stellen. HEX mit 5 oder 7 Stellen gibt es nicht, gültig sind nur 3, 4, 6 und 8. Meist ist beim Kopieren und Einfügen eine Stelle verloren gegangen oder dazugekommen.
• Ein Buchstabe außerhalb von A-F. #G00 ist kein HEX, und der Buchstabe O statt der Null (#FF0O00) ist ein Klassiker.
• Eine Farbe, die nach dem Umrechnen anders aussieht. Der Wert stimmt, aber das Design-Tool arbeitet mit einem anderen Farbprofil (etwa Display P3) und der Browser zeigt sRGB. Die Umrechnung selbst verliert nichts.

Basisfarben in HEX und RGB

Die 16 Basisfarben von CSS mit HEX und RGB. Klicken Sie auf eine Zeile, um die Farbe ins Tool zu laden.