RGB-zu-HEX-Konverter

So rechnen Sie RGB in HEX um

RGB in HEX umzurechnen heißt, jeden Kanal vom Dezimal- ins Hexadezimalsystem zu übertragen und die drei Paare hinter ein # zu setzen. Von Hand teilen Sie den Kanal durch 16: Der Quotient ist die erste Ziffer, der Rest die zweite.

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

Ein Quotient oder Rest von 10 bis 15 wird zu einem Buchstaben: 10 ist A, 11 ist B, 12 ist C, 13 ist D, 14 ist E und 15 ist F. Ein zweites Beispiel, mit einem Nullkanal:

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

Ein Nullkanal belegt trotzdem zwei Stellen (00). HEX mit Transparenz, also mit 8 Stellen, hat weiter unten einen eigenen Abschnitt. Und wenn beide Ziffern jedes Paars gleich sind, lässt sich der Code kürzen: rgb(255 0 0) wird zu #F00. Das Tool zeigt das Kurz-HEX immer an, wenn es existiert.

Die führende Null

Der klassische Fehler beim Zusammenbauen von HEX von Hand ist toString(16). Es füllt nicht mit einer Null auf: Der Kanal 15 wird zu f, nicht zu 0f. Bei so einem Kanal verliert der Code eine Stelle und wird zu einer anderen Farbe, ganz ohne Fehlermeldung:

(15).toString(16);                  // "f"
(15).toString(16).padStart(2, "0");  // "0f"

"#" + [15, 0, 0].map((c) => c.toString(16)).join("");
// "#f00"  (and not "#0f0000")

Beachten Sie, dass #f00 ein gültiges Kurz-HEX ist, gleich #ff0000. Der Browser akzeptiert es, aber die Farbe ist falsch. Die Lösung ist padStart(2, '0'), das mit führenden Nullen auf zwei Stellen auffüllt.

Transparenz in HEX

Für die Transparenz multiplizieren Sie das Alpha (von 0 bis 1) mit 255, runden und wandeln das Ergebnis ins Hexadezimalsystem um. Das Paar kommt ans Ende des Codes und bildet das HEX mit 8 Stellen. Im Feld kann das Alpha 0.5, .5 oder 50% lauten: Alle drei ergeben dasselbe.

alpha = 0.5
0.5 × 255 = 127.5  →  128
128 = 8 × 16 + 0   →  80
rgb(82 113 255 / 50%)  →  #5271FF80

Warum ergeben 50 % 80 und nicht 7F? Weil 0,5 × 255 gleich 127,5 ist und die Rundung auf 128 (80) aufrundet. Wer abschneidet statt zu runden, landet bei 127 (7F). Der Unterschied beträgt 1 von 255, auf dem Bildschirm unsichtbar, aber er zeigt sich, wenn Sie zwei Tools Byte für Byte vergleichen.

Umgekehrt wird HEX mit 8 Stellen wieder zu Alpha, indem Sie das letzte Paar durch 255 teilen (80 ergibt 0,5). Der HEX-zu-RGB-Konverter rechnet das und zeigt das fertige rgba().

Deckkraft-Tabelle in HEX

Die Paare für das Ende des Codes, von 100 % bis 0 % in 5er-Schritten. Die dritte Spalte zeigt das Ergebnis auf #5271FF.

Zur Verwendung hängen Sie das Paar an das HEX mit sechs Stellen an: 40 % Deckkraft auf #5271FF ergibt #5271FF66. Das funktioniert in background, color, border-color, box-shadow und sogar in den Stopps eines linear-gradient.

RGB in HEX im Code umrechnen

In JavaScript kombinieren Sie toString(16) mit padStart(2, '0'), damit die führende Null nicht verloren geht:

const toHex = (value) =>
  Math.round(value).toString(16).padStart(2, "0");

function rgbToHex(r, g, b, a) {
  const alpha = a === undefined ? "" : toHex(a * 255);

  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alpha}`.toUpperCase();
}

rgbToHex(82, 113, 255);       // "#5271FF"
rgbToHex(82, 113, 255, 0.5);  // "#5271FF80"
rgbToHex(15, 0, 0);           // "#0F0000"

In Python füllt der f-String mit :02X bereits mit Nullen auf und schreibt groß. hex(255) liefert '0xff', mit Präfix und ohne führende Null, deshalb ist der f-String meist praktischer:

def rgb_to_hex(r: int, g: int, b: int) -> str:
    if not all(0 <= channel <= 255 for channel in (r, g, b)):
        raise ValueError("channel out of range 0-255")

    return f"#{r:02X}{g:02X}{b:02X}"

rgb_to_hex(82, 113, 255)  # '#5271FF'
rgb_to_hex(15, 0, 0)      # '#0F0000'

Die Falle ist, den Bereich von 0 bis 255 nicht zu prüfen. Ohne diese Prüfung wird der Kanal 300 zu 12c, drei Stellen, und der gesamte Code verrutscht:

(300).toString(16);   // "12c"
(-1).toString(16);    // "-1"

Kommt der Wert aus einem Textfeld, wandeln Sie ihn mit Number() um und prüfen ihn mit Number.isInteger. Der String "82" funktioniert, "8 2" wird dagegen zu NaN.

Was CSS in rgb() akzeptiert

Das Tool liest dieselben Formate wie das rgb() in CSS, Sie können also direkt aus Ihrem Stylesheet einfügen:

• Prozentwerte: rgb(100% 0% 0%) entspricht rgb(255 0 0).
• Dezimalzahlen: rgb(82.4 113 255) ist gültiges CSS. Hier wird der Kanal auf die nächste ganze Zahl gerundet.
• Werte außerhalb von 0-255: CSS meldet keinen Fehler und begrenzt auf Maximum oder Minimum, rgb(300 0 0) wird also zu rgb(255 0 0). Das Tool warnt dagegen, weil es fast immer ein Tippfehler ist.
• Trennzeichen: 82,113,255 und 82 113 255 funktionieren, und eine vierte lose Zahl wird als Transparenz von 0 bis 1 gelesen.

Die Syntax mit Leerzeichen und Schrägstrich für die Transparenz und der Unterschied zu rgba() mit Kommas sind im HEX-zu-RGB-Konverter erklärt.

Weitere Farb-Tools

Für die Gegenrichtung nutzen Sie den HEX-zu-RGB-Konverter. Brauchen Sie ein Testbild mit Hintergrund- und Textfarbe in HEX, akzeptiert der Platzhalterbild-Generator die Codes, die Sie gerade umgerechnet haben.