HEX-in-RGB-Konverter

Wie die Umrechnung von HEX in RGB funktioniert

Auf dieser Seite geben Sie einen HEX-Farbcode wie #4f46e5 oder #abc ein und erhalten sofort die zugehörigen RGB-Werte – drei ganze Zahlen zwischen 0 und 255. Die Umrechnung ist streng mathematisch, weil HEX und RGB zwei Darstellungen derselben 8‑Bit-pro-Kanal-Information sind.

Ein HEX-Code besteht aus zwei Zeichen pro Farbkanal: RRGGBB. Jedes Zeichen steht für eine Hexadezimalziffer (0–9 und A–F). Das erste Zeichen gibt die 16er-Stelle an, das zweite die Einerstelle. Für den Rotkanal von #4f46e5 rechnen Sie:

4 (Hex) = 4 (dezimal) × 16 = 64
f (Hex) = 15 (dezimal) × 1 = 15
Summe = 64 + 15 = 79

Das gleiche Verfahren für Grün (46): 4×16 = 64, 6×1 = 6 → 70. Für Blau (e5): e=14×16=224, 5=5×1=5 → 229. Das RGB-Tripel lautet also rgb(79, 70, 229).

Die Umkehrung – RGB in HEX – funktioniert genauso, nur in die andere Richtung. Jeder Kanalwert wird durch 16 geteilt, der ganzzahlige Quotient wird zur ersten Hexziffer, der Rest zur zweiten. Beispiel: 79 ÷ 16 = 4 Rest 15 → 4 und f = 4f.

Dreistellige Kurznotation und ihre Erweiterung

Viele CSS-Farben werden als dreistellige HEX-Codes notiert, etwa #abc. Diese Schreibweise ist eine Verkürzung der sechsstelligen Form: Jede Ziffer wird verdoppelt. #abc wird zu #aabbcc. Das ist keine Schätzung oder Annäherung; es ist die standardisierte Kurzform, die in CSS 1.0 eingeführt wurde und bis heute gültig ist.

Auf dieser Seite erkennen Sie dreistellige Eingaben automatisch. Geben Sie #abc ein, wird daraus #aabbcc expandiert, und die RGB-Werte lauten rgb(170, 187, 204). Die Tabelle zeigt einige Beispiele:

Die Expansion ist verlustfrei: Aus #f60 entsteht exakt #ff6600, nicht etwa eine Annäherung. Das ist wichtig, weil bei Farbwerten jede Abweichung sichtbar ist.

Kein Alphakanal – nur reine 6‑ oder 3‑stellige HEX

Diese Seite akzeptiert ausschließlich HEX-Codes mit sechs oder drei Zeichen (ohne oder mit #‑Präfix). Achtstellige HEX-Codes wie #4f46e580, die einen Alphakanal für Transparenz enthalten, werden nicht verarbeitet. Der Grund liegt im Zweck der Seite: Sie soll die drei additiven Grundkanäle Rot, Grün und Blau in ganzen Zahlen ausgeben. Ein Alphakanal wäre ein vierter Wert, der in diesem Werkzeug nicht vorgesehen ist und die Lesbarkeit der Ausgabe verwirren würde.

Wenn Sie einen achtstelligen HEX-Code eingeben, erscheint die Fehlermeldung:
„Enter a hex color like #4f46e5 or #abc.“
Die gleiche Meldung erscheint bei allen ungültigen Formaten – etwa bei Zeichen außerhalb 0–9 und A–F, bei zu vielen Ziffern oder bei Sonderzeichen.

Gleichzeitige Aktualisierung aller Farbfelder

Nach der Eingabe eines HEX-Codes zeigt die Seite nicht nur das RGB-Tripel an, sondern errechnet daraus auch die Werte in HSL, HSV, CMYK und LAB. Diese Berechnungen laufen im Browser – es werden keine Daten zum Server gesendet. Verändern Sie anschließend einen beliebigen anderen Farbwert (etwa den HSL-Wert), werden alle Felder neu berechnet, einschließlich des HEX-Feldes. Das ist nützlich, wenn Sie eine Farbe in einem anderen Format vorliegen haben und deren HEX- oder RGB-Entsprechung brauchen.

Die Umrechnung zwischen den Farbräumen erfolgt nach standardisierten Algorithmen (z. B. sRGB → XYZ → Lab). Die RGB-Werte bleiben dabei immer ganzzahlig; da die HEX→RGB-Umrechnung eine reine Basisumwandlung ist, treten keine Rundungsfehler auf.

Wer diese Seite braucht und warum

• Frontend-Entwickler benötigen RGB-Werte, wenn sie in JavaScript mit canvas oder in Bibliotheken wie D3.js arbeiten, die Farben als Zahlentripel verarbeiten. Ein HEX-String "#4f46e5" lässt sich nicht direkt in eine Zahl umwandeln; (79, 70, 229) schon.
• Designer bekommen HEX-Codes aus Markenrichtlinien, müssen diese aber in Tools wie Photoshop oder Figma eintragen, die oft RGB-Schieberegler bevorzugen. Die Umrechnung ist hier schneller als ein manuelles Nachrechnen.
• Spieleentwickler und Digitalkünstler arbeiten häufig mit Farbwerten in 0–255, weil viele Grafik-APIs (OpenGL, WebGL, DirectX) Farben als vier 8‑Bit-Ganzzahlen erwarten. Ein HEX-Code muss vorher in seine Kanalwerte zerlegt werden.
• Lernende und Studierende, die verstehen wollen, wie das additive RGB-Modell funktioniert, können mit diesem Tool HEX-Codes in ihre Kanalwerte zerlegen und sehen, wie sich eine Änderung eines Kanals auf die resultierende Farbe auswirkt.

Typische Fehler und ihre Vermeidung

• Fehlendes # wird automatisch ergänzt – 4f46e5 wird akzeptiert. Aber ein # an der falschen Stelle (etwa 4#f46e5) führt zur Fehlermeldung.
• Kleinschreibung ist egal, da Hexziffern nicht zwischen Groß- und Kleinschreibung unterscheiden (#4f46e5 = #4F46E5).
• Leerzeichen oder Zeilenumbrüche im Eingabefeld werden nicht ignoriert; der eingegebene String wird exakt geparst.
• Nicht‑hexadezimale Zeichen wie G, Z oder % lösen die Fehlermeldung aus.

Die Fehlermeldung ist bewusst kurz gehalten: „Enter a hex color like #4f46e5 or #abc.“ Sie zeigt ein gültiges Beispiel plus die Kurzform, sodass der Nutzer sofort versteht, welches Format erwartet wird.

Häufig gestellte Fragen (FAQ)

Warum akzeptiert die Seite keinen 8‑stelligen HEX-Code mit Alpha?
Diese Seite ist speziell für die Umwandlung von HEX in RGB ohne Alphakanal ausgelegt. Ein Alpha-Wert würde einen vierten Kanal einführen, der nicht in das Zielformat rgb(r, g, b) passt. Für HEX-mit-Alpha bräuchten Sie eine separate Funktion, die einen 8‑stelligen Code in rgba() umwandelt.

Kann ich auch einen HEX-Code ohne # eingeben?
Ja. Der #-Präfix ist optional. 4f46e5 wird genauso verarbeitet wie #4f46e5.

Warum werden bei dreistelligen Codes plötzlich die RGB-Werte heller?
Weil jede Ziffer verdoppelt wird, entsteht ein höherer Wert als bei einer direkten Interpretation als 3‑stelliger HEX. Beispiel: #abc wird zu #aabbcc und ergibt (170, 187, 204). Würde man #abc fälschlich als 6‑stelligen Code auffassen (#0abc00?), erhielte man völlig andere Werte. Die Verdoppelung ist der korrekte CSS-Standard.

Stimmen die HSB/HSV-Werte mit denen aus Photoshop überein?
Ja, solange beide Programme den gleichen Farbraum (sRGB) und die gleichen Umrechnungsalgorithmen verwenden. Abweichungen können auftreten, wenn in der Software ein anderer Farbraum (Adobe RGB, ProPhoto) oder eine abweichende Rundungsvorschrift genutzt wird. Diese Seite rechnet auf Basis des sRGB-Standards, der für die meisten Web‑ und Bildschirmanwendungen verwendet wird.

Kann ich die RGB-Werte direkt in CSS einfügen?
Ja. Die Ausgabe rgb(79, 70, 229) ist gültiges CSS. Sie können sie auch in die Schreibweise mit Leerzeichen (rgb(79 70 229)) oder in die rgba()-Form mit optionalem Alphakanal umwandeln, indem Sie den vierten Wert ergänzen.

Werden die eingegebenen Daten irgendwo gespeichert?
Nein. Alle Berechnungen laufen lokal im Browser. Es wird kein HEX-Code, kein RGB-Tripel und kein anderer Wert an einen Server übermittelt oder gespeichert. Das gilt für die gesamte Seite.