Farbcode-Umrechner

Was macht der Farbcode-Umrechner mit RGB in HEX?

Der Rechner übersetzt Farbwerte zwischen HEX, RGB, HSL, HSV und CMYK und erkennt Schreibweisen wie #1E88E5, rgb(30, 136, 229) oder hsl(120, 60%, 40%) automatisch.

Das ist praktisch, wenn du denselben Farbton in verschiedenen Umgebungen brauchst: Im CSS steht oft ein HEX-Code, in Design-Tools begegnen dir RGB oder HSL, und in einem Design-Handover sollen alle Werte eindeutig dokumentiert sein. Aus #1E88E5 werden zum Beispiel rgb(30, 136, 229), hsl(208, 79%, 51%), hsv(208°, 87 %, 90 %) und cmyk(87 %, 41 %, 0 %, 10 %). Dazu bekommst du Einzelwerte wie Rot 30, Grün 136, Blau 229, den Dezimalwert 2.001.125 und einen passenden CSS-Farbnamen.

Wichtig ist die Einordnung: HEX, RGB, HSL und HSV beschreiben Bildschirmfarben. CMYK wird hier ohne Farbprofil ausgegeben. Der Wert hilft dir zur groben Übersetzung, ersetzt aber keine farbverbindliche Druckumrechnung mit Profil, Papier und Ausgabegerät.

Wie rechnest du RGB in HEX um?

Bei RGB in HEX wird jeder Farbkanal einzeln in eine zweistellige Hexadezimalzahl übersetzt. Danach werden die drei Teile hinter ein # geschrieben: erst Rot, dann Grün, dann Blau. Der Wertebereich der RGB-Kanäle reicht von 0 bis 255; im HEX-Code steht derselbe Kanal dann als Paar aus Ziffern und Buchstaben.

Ein Beispiel mit rgb(30, 136, 229):

RGB-Kanal	Dezimal	HEX
Rot	30	1E
Grün	136	88
Blau	229	E5

Daraus entsteht #1E88E5. In die Gegenrichtung funktioniert es genauso: Der HEX-Code wird in Kanalpaare zerlegt. Bei #1E88E5 steht 1E für Rot, 88 für Grün und E5 für Blau. Das Ergebnis ist wieder rgb(30, 136, 229).

Du musst die Umrechnung nicht auswendig können. Für typische Werte ist aber hilfreich zu wissen, dass 0 als 00, 128 als 80 und 255 als FF erscheint. Deshalb ist rgb(255, 0, 0) der HEX-Code #FF0000, Weiß ist #FFFFFF und Schwarz ist #000000.

Wie hängen HSL in HEX, HSV und CMYK zusammen?

HSL beschreibt eine Farbe anders als RGB: H ist der Farbton, S die Sättigung und L die Helligkeit. Beim Beispiel #1E88E5 liegt der Farbton bei 208,04 °, die Sättigung bei 79,28 % und die Helligkeit bei 50,78 %. Gerundet als CSS-Wert wird daraus hsl(208, 79%, 51%).

HSV oder HSB nutzt ebenfalls einen Farbton und eine Sättigung, bewertet die Helligkeit aber anders. Darum ist derselbe Farbton dort hsv(208°, 87 %, 90 %). Das ist kein Widerspruch, sondern ein anderes Modell. Wenn du Werte aus einem Grafikprogramm übernimmst, achte darauf, ob dort HSL oder HSV gemeint ist. hsl(210, 79%, 51%) ergibt #1F82E5, während hsv(210°, 87 %, 90 %) zu #1E82E6 wird.

Bei Grau, Schwarz und Weiß wirkt HSL manchmal irritierend. rgb(128, 128, 128) wird zu hsl(0, 0%, 50%). Der Farbton steht zwar bei 0,00 °, hat aber keine sichtbare Bedeutung, weil die Sättigung 0,00 % ist. Auch Schwarz hat hsl(0, 0%, 0%) und Weiß hsl(0, 0%, 100%). Entscheidend ist hier nicht der Farbton, sondern Sättigung und Helligkeit.

Wie funktionieren Kurz-HEX und CSS-Farbnamen?

Kurz-HEX ist eine kompakte Schreibweise für bestimmte HEX-Codes. #F80 wird zu #FF8800: Die Kurzzeichen werden jeweils verdoppelt, also Rot FF, Grün 88, Blau 00. Das Ergebnis entspricht rgb(255, 136, 0), hsl(32, 100%, 50%) und dem ähnlichsten CSS-Farbnamen darkorange.

Auch #ABC ist so eine Kurzform. Sie wird zu #AABBCC, also rgb(170, 187, 204). Als HSL-Wert ergibt sich hsl(210, 25%, 73%), der ähnlichste CSS-Farbname ist lightsteelblue. Nicht jeder HEX-Code hat eine Kurzform: #1E88E5 bleibt ausgeschrieben, weil die Kanalpaare nicht aus gleichen Zeichen bestehen.

CSS-Farbnamen sind hilfreich, aber du solltest zwischen exakten und ähnlichen Namen unterscheiden. #FF0000 ist exakt red, #FFFFFF ist exakt white, #000000 ist exakt black, und #808080 ist exakt gray. Bei #1E88E5 lautet der Eintrag dagegen dodgerblue (ähnlichster Name). Für Design-Tokens und Styleguides ist der HEX- oder RGB-Wert daher meist eindeutiger als ein angenäherter Name.

Welche Fehler solltest du beim Farbcode umrechnen vermeiden?

Der häufigste Fehler ist eine vertauschte Kanalreihenfolge. Bei RGB steht die Reihenfolge immer für Rot, Grün und Blau. rgb(0, 128, 255) ergibt #0080FF; würdest du die Kanäle anders lesen, bekämst du einen anderen Farbton. Achte außerdem auf führende Nullen: Ein Kanal mit dem Wert 0 wird im HEX-Code als 00 geschrieben.

Ein zweiter Punkt ist die Lesbarkeit von Text. Der Rechner zeigt dir den Kontrast zu Weiß und Schwarz und nennt eine lesbare Schriftfarbe. Für #1E88E5 wird schwarze Schrift mit Kontrast 5,71 : 1 und AA (WCAG 2.2) ausgegeben; Weiß liegt bei 3,68 : 1. Bei #FF8800 ist schwarze Schrift mit 8,77 : 1 als AAA (WCAG 2.2) markiert, während Weiß bei 2,39 : 1 liegt. Für Schwarz ist weiße Schrift mit 21 : 1 passend, für Weiß schwarze Schrift mit 21,00 : 1.

Verlasse dich bei CMYK nicht auf eine exakte Druckfarbe. cmyk(0 %, 40 %, 80 %, 0 %) wird hier zu #FF9933, rgb(255, 153, 51) und hsl(30, 100%, 60%). Ohne Farbprofil bleibt das eine rechnerische Annäherung für die Bildschirmdarstellung. Für CSS, UI-Tokens und Webgrafiken ist die Umrechnung dagegen gut geeignet, weil HEX, RGB und HSL direkt in Stylesheets verwendet werden können.