Zum Hauptinhalt springen
ToolsByUs

RGB in HEX umwandeln

Der RGB-zu-HEX-Konverter verwandelt drei Dezimalkanäle in eine Hexfarbe. Jeder Kanal wird durch 16 geteilt: Der Quotient ist die erste Hexziffer, der Rest die zweite; 136 wird also zu 88 und 255 zu ff. Ein Alphawert wird als viertes Paar angehängt, gerundet auf den nächstliegenden von 256 Schritten – die eine Stelle, an der der Rundtrip nicht exakt ist.

Nur lokal
RGB-Eingabe

Links eine Farbe eingeben. Akzeptiert werden Hexwerte mit oder ohne Raute, rgb(), hsl(), oklch() und CSS-Farbnamen.

Wie funktioniert RGB in HEX umwandeln?

Jeder Kanal ist eine ganze Zahl von 0 bis 255, und zwei Hexziffern decken genau diesen Bereich ab. Teilen durch 16: Der Quotient ist die erste Ziffer, der Rest die zweite. 136 ÷ 16 ist 8 Rest 8, also 88. 255 ÷ 16 ist 15 Rest 15, und 15 ist f, also ff.

Einstellige Kanäle brauchen die führende Null

Ein Kanal unter 16 ergibt nur eine Ziffer, und wer die Null weglässt, verschiebt jede Ziffer danach. rgb(255 8 0) ist #ff0800, nicht #ff800 – Letzteres ist fünf Ziffern lang und gar keine Farbe. Das ist der klassische Bug in handgeschriebenen Konvertern, und er zeigt sich nur bei dunklen Farben – also dort, wo niemand hinschaut.

Was mit einem nicht ganzzahligen Kanal passiert

CSS erlaubt rgb(255.6 136 0), und Hex kann keinen Bruch speichern. Der Wert wird zur nächsten ganzen Zahl gerundet – genau das macht der Browser auch. Stammen Ihre Kanäle aus einer Berechnung – eine aufgehellte Farbe, ein interpolierter Schritt –, ist das Hex, das Sie zurückbekommen, die gerundete Version, und eine erneute Umwandlung gibt den anfänglichen Bruch nicht zurück.

Alpha und der eine verlustbehaftete Schritt

Ein Alphawert von 0.5 wird zu 80, denn 0.5 × 255 ist 127.5, gerundet 128. Zurück umgewandelt ergibt das 0.502. Jeder Farbkanal übersteht Hin- und Rückweg exakt; Alpha nicht, denn es ist ein Bruch, der in 256 Schritten gespeichert wird. Der Unterschied liegt weit unter jeder Sichtbarkeitsschwelle – und fällt genau dann auf, wenn Sie in einem Test zwei Strings vergleichen.

Prozentangaben

rgb(100% 53.3% 0%) ist dieselbe Farbe wie rgb(255 136 0) : Prozentangaben in rgb() beziehen sich auf 255, nicht auf 100. Das erwischt alle, die aus einem Design-Tool umwandeln, das Werte von 0–100 exportiert – dort bedeutet 53% für 135, nicht für 53.

RGB-Kanäle

rgb(255 136 0)

Die Hexfarbe

#ff8800

255 → ff   (15 × 16 + 15)
136 → 88   (8 × 16 + 8)
  0 → 00   (0 × 16 + 0)

Welche Optionen und Sonderfälle unterstützt RGB in HEX umwandeln?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
0Kanal00Das Minimum. Beide Ziffern sind null.
8Kanal08Kleiner als 16, daher ist die führende Null erforderlich. Entfernt man sie, wird der gesamte Wert verfälscht.
128Kanal80Die Mitte, und exakt 8 × 16.
136Kanal888 × 16 + 8.
255KanalffDas Maximum. 15 × 16 + 15.
Alpha 0.5Bruch80127.5 wird auf 128 gerundet. Die Rückumwandlung ergibt 0.502 – der einzige Schritt dieser Umwandlung, der nicht exakt ist.
255.6nicht ganzzahligffGerundet, so wie der Browser rundet. Ein gebrochener Kanal überlebt Hex nicht.
100%Prozent255Prozentwerte beziehen sich auf 255. 53% ist 135, nicht 53.

Häufig gestellte Fragen

Wie wandelt man RGB von Hand in Hex um?

Teilen Sie jeden Kanal durch 16. Der Quotient ist die erste Ziffer, der Rest die zweite; 10–15 schreibt man als a–f. 136 ÷ 16 = 8 Rest 8, also 88. Schreiben Sie die drei Paare in der Reihenfolge Rot, Grün, Blau hintereinander und ein # davor. Die einzige Falle ist ein Kanal unter 16: Er muss trotzdem zweistellig sein, also ist 8 gleich 08, nicht 8.

Warum ist meine Hexfarbe fünf Ziffern lang?

Ein Kanal unter 16 hat seine führende Null verloren. rgb(255 8 0) ist #ff0800; als #ff800 geschrieben, sind es fünf Zeichen – keine gültige Hexfarbe, und der Browser ignoriert die gesamte Deklaration. Das ist der häufigste Bug in handgeschriebenem Umwandlungscode, und er erscheint nur bei dunklen Farben.

Geht beim Umwandeln von RGB in Hex Farbinformation verloren?

Nein, was die Farbe selbst angeht – beide Schreibweisen halten dieselben drei Bytes, der Rundtrip ist also exakt. Alpha ist die Ausnahme: Es ist in CSS ein Bruch, und Hex speichert ihn in 256 Schritten; 0.5 wird zu 80 und kommt als 0.502 zurück. Auf dem Bildschirm unsichtbar, im String-Vergleich sichtbar.

Was ergibt die Umwandlung von rgb(100% 50% 0%)?

#ff8000. Prozentangaben in rgb() sind Anteile von 255, nicht von 100; 50% ist also 127.5, gerundet 128 – hex 80. Exportiert ein Design-Tool diese Zahlen als 0–100-Werte, bedeuten sie etwas anderes, und diesen Unterschied sollte man prüfen, bevor man ihn einfügt.

Sollte ich rgba() schreiben oder einen 8-stelligen Hexwert verwenden?

Beides geht; beide werden überall aktuell unterstützt. Der 8-stellige Hexwert ist kompakter und hält die ganze Farbe in einem Token – passend für Design-Tokens und Variablen. rgba() ist leichter zu lesen und von Hand zu editieren, und die meisten bestehenden Stylesheets enthalten es bereits. Das einzige echte Argument ist die Konsistenz mit dem umgebenden Code.

Warum stimmt der Hexwert aus dem Design nicht mit dem RGB überein, das meine Bildschirm-Pipette meldet?

Farbmanagement. Eine Bildschirm-Pipette nimmt Pixel, nachdem das Anzeigeprofil angewendet wurde; ein Breitfarbmonitor meldet daher andere Zahlen für dieselbe sRGB-Quellfarbe. Nehmen Sie die Probe aus der Designdatei statt aus einem Screenshot, oder stellen Sie die Pipette auf sRGB ein – dann stimmen beide wieder überein.

ToolsByUs-Team · Wie wir unsere Tools prüfen