RGB in HEX umrechnen

Von dezimal zu hexadezimal: die eigentliche Rechnung

Ein rgb()-Wert liefert dir drei Zahlen zur Basis 10 zwischen 0 und 255. Ein HEX-Code speichert genau dieselben drei Zahlen zur Basis 16, mit zwei Ziffern pro Kanal, aneinandergereiht hinter einem #. Um einen Kanal von Hand umzurechnen, teilst du ihn durch 16: Der Quotient wird zur ersten Hexadezimalziffer, der Rest zur zweiten, wobei 10 bis 15 als die Buchstaben a bis f geschrieben werden.

Schick rgb(53, 100, 196) durch dieses Verfahren. Rot: 53 ÷ 16 ergibt 3 Rest 5, also 35. Grün: 100 ÷ 16 ergibt 6 Rest 4, also 64. Blau: 196 ÷ 16 ergibt 12 Rest 4, und da 12 als c geschrieben wird, lautet das Paar c4. Hängt man die Paare aneinander, lautet die Antwort #3564c4. Da jeder Kanal ohnehin in ein Byte passt, wird unterwegs nichts gerundet – jedes ganzzahlige RGB-Tripel hat genau eine sechsstellige HEX-Schreibweise.

Der Einzeiler, den irgendwann alle Entwickler schreiben

JavaScript erledigt die Basisumwandlung für dich: (196).toString(16) liefert 'c4'. Der Haken sind kleine Kanalwerte – (10).toString(16) liefert nur das eine Zeichen 'a', und eine fehlende führende Null zerstört den ganzen Code. Fülle jedes Paar ausdrücklich auf: const toHex = (n) => n.toString(16).padStart(2, '0'), dann ergibt '#' + [53, 100, 196].map(toHex).join('') genau '#3564c4'.

Runde und begrenze, bevor du umrechnest. toString(16) kodiert klaglos auch Bruchzahlen – (49.98).toString(16) ergibt '31.fa…', und das ist keine Farbe. Pack die Eingabe deshalb zuerst in Math.round und deckle sie auf den Bereich 0–255. Kanalwerte, die aus HSL-Formeln oder Deckkraft-Berechnungen kommen, sind fast nie ganzzahlig.

Prozentwerte und die moderne rgb()-Syntax

CSS akzeptiert Kanäle auch als Prozentwerte, wobei 100 % auf 255 abgebildet wird. rgb(100% 40% 0%) ist also #ff6600: 100 % sind 255 (ff), 40 % von 255 sind genau 102 (66), und 0 % ist 0 (00). Dieser Konverter versteht sowohl die alte Komma-Schreibweise als auch die moderne mit Leerzeichen – mit oder ohne / alpha-Segment.

Halte die beiden Einheitensysteme auseinander: rgb(50%, 50%, 50%) ist das mittlere Grau #808080 (127.5 wird auf 128 aufgerundet), rgb(50, 50, 50) dagegen das fast schwarze #323232. Dieselben Ziffern getippt, völlig verschiedene Farben auf dem Bildschirm.

Alpha: von rgba() zum 8-stelligen Code

Transparenz wird genauso umgerechnet wie die Farbkanäle, nur ausgehend von einer Skala von 0–1: Alpha mit 255 multiplizieren, runden und das Ergebnis als viertes Hex-Paar anhängen. rgba(53, 100, 196, 0.5) wird zu #3564c480, denn 0.5 × 255 = 127.5, gerundet also 128 oder hexadezimal 80. Praktische Merkpunkte: Alpha 0.4 ist 66, 0.6 ist 99, 0.8 ist cc.

Beachte: Das Hex-Paar ist kein Prozentwert. 80 sieht aus, als müsste es 80 % Deckkraft bedeuten, tatsächlich sind es aber 128 ÷ 255 ≈ 50.2 %. Wenn jemand im Team nach „Hex mit 80 % Alpha“ fragt, ist das gesuchte Paar cc, nicht 80.

Schnellreferenz: gängige RGB-Werte in HEX

Eine weitere Schreibweise lohnt sich zu kennen: Stimmen in jedem Paar beide Ziffern überein, schrumpft der Code auf eine dreistellige Kurzform. rgb(51, 102, 204) wird zu #3366cc kodiert, und weil 33, 66 und cc alle aus verdoppelten Ziffern bestehen, verkürzt sich das zu #36c. Die Kurzform spart Bytes, rundet aber nichts – Browser expandieren sie exakt zu denselben drei Kanälen zurück. Die meisten Farben kommen dafür natürlich nicht infrage: #3564c4 hat kein einziges verdoppeltes Paar und bleibt deshalb sechsstellig.

Wo du um HEX nicht herumkommst

• HTML-Farbeingaben – <input type="color"> akzeptiert und liefert ausschließlich die siebenstellige Form #rrggbb; gibst du ihm einen rgb()-String, fällt es auf Schwarz zurück.
• APIs und Konfigurationsdateien – GitHub-Label-Farben, CI-Badge-Dienste und unzählige YAML-Themes erwarten nacktes sechsstelliges Hex, oft sogar ohne das #.
• URLs und Query-Strings – Hex ist kompakt und hat keine Klammern oder Kommas, die maskiert werden müssten; denk nur daran, dass ein wörtliches # als %23 kodiert werden muss.
• Übergaben und Doku – ein HEX-Code übersteht den Weg durch Chat, Tickets und Tabellen als ein einziges, eindeutiges Token.

Rundungsfallen und andere Fehler

• Runden, nicht abschneiden. Ein berechneter Kanalwert von 199.92 wird abgeschnitten zu 199 (c7), korrekt gerundet dagegen zu 200 (c8) – in Verläufen ein sichtbarer Fehler von einer Stufe.
• Lass niemals die führenden Nullen weg: rgb(0, 160, 200) ergibt ohne Auffüllen aneinandergehängt #0a0c8 – eine fünfstellige Zeichenkette, die Browser rundheraus ablehnen.
• Kanalwerte außerhalb von 0–255 deuten auf einen Fehler weiter oben hin. Filter und Blend-Berechnungen können überschießen; begrenze die Werte, bevor du kodierst.
• Die alte Komma-Syntax kann Einheiten nicht mischen – rgb(255, 40%, 0) ist ungültiges CSS. Entscheide dich also für Zahlen oder Prozentwerte und bleib konsequent dabei.

Alles hier läuft zu 100 % in deinem Browser; die Werte, die du eintippst, verlassen deinen Rechner nie. Für die Gegenrichtung gibt es den Konverter HEX zu RGB, und wenn du aus derselben Eingabe Lab, LCH oder OKLCH brauchst, zeigt dir der universelle Farbkonverter alle Formate auf einmal.