Farb-Konverter: HEX, RGB und HSL Werte umrechnen

Jede der drei Hex-Stellenpaare steht für einen Farbkanal: Aus #1E88E5 werden so R=30, G=136 und B=229, weil 1E hexadezimal 30 ergibt, 88 gleich 136 ist und E5 gleich 229.

Der Farb-Konverter übernimmt diese Umrechnung automatisch, sobald du den Hex-Wert mit oder ohne führendes # im Modus "HEX → RGB & HSL" einträgst, und liefert zusätzlich gleich die HSL-Darstellung mit Farbwinkel 208°, Sättigung 79 % und Helligkeit 51 % dazu.

Gib dafür genau die sechs Hexadezimalziffern 0 bis 9 und A bis F ein, denn Buchstaben außerhalb dieses Bereichs oder eine falsche Zeichenzahl macht die Eingabe ungültig.

Praktisch nutzt du das etwa, wenn du einen Hex-Code aus Figma oder einem Screenshot-Tool kopiert hast und die genauen RGB-Kanalwerte für ein Canvas-Skript oder eine box-shadow-Angabe brauchst.

RGB 255, 87, 51 ergibt den Hex-Code #FF5733: Jeder der drei Kanalwerte von 0 bis 255 wird einzeln in eine zweistellige Hexadezimalzahl umgewandelt und die drei Paare werden aneinandergehängt, aus 255 wird FF, aus 87 wird 57 und aus 51 wird 33.

Trage die drei Zahlen kommagetrennt im Modus "RGB → HEX & HSL" ein, jeder Kanal muss zwischen 0 und 255 liegen, sonst gilt die Eingabe als ungültig.

Der Rechner zeigt zum Hex-Wert direkt auch die HSL-Zahlen (hier Farbwinkel 10,6°, Sättigung 100 %, Helligkeit 60 %), damit du auf einen Blick siehst, ob du ein kräftiges, gesättigtes Orange-Rot vor dir hast.

Typischer Anwendungsfall: Ein RGB-Wert stammt aus einem Bildbearbeitungsprogramm oder einer Pipette, und du brauchst den kompakten Hex-Code für ein CSS-Stylesheet oder ein Design-Token.

RGB 255, 255, 255 beziehungsweise Hex #FFFFFF ist reines Weiß, weil alle drei Farbkanäle auf dem Maximum stehen; in HSL ergibt das 0°, 0 % Sättigung und 100 % Helligkeit. #FFFF00 dagegen ist reines Gelb: Rot und Grün stehen voll auf 255, Blau bleibt bei 0, was in HSL einem Farbwinkel von 60° bei 100 % Sättigung und 50 % Helligkeit entspricht.

Zum Vergleich liefert #000000 (RGB 0, 0, 0) reines Schwarz mit HSL 0°, 0 %, 0 %. Trage einen dieser Werte direkt in den passenden Modus ein, um die jeweils andere Darstellung zu bestätigen.

Diese drei Werte eignen sich gut als Eichpunkte: Wenn ein unbekannter Hex-Code nah an FFFFFF, FFFF00 oder 000000 liegt, erkennst du sofort, in welche Richtung sich der Farbton verschiebt, ohne jeden Kanal einzeln nachzurechnen.

Ein Hex-Code ist die sechsstellige hexadezimale Schreibweise einer RGB-Farbe, bei der je zwei Ziffern einen Farbkanal von 0 bis 255 kodieren; gültig sind ausschließlich die Zeichen 0 bis 9 und A bis F.

Weil jeder der drei Kanäle 256 Abstufungen kennt, lassen sich damit 256 × 256 × 256 = 16.777.216 unterschiedliche Farben eindeutig adressieren, von 000000 (Schwarz) bis FFFFFF (Weiß).

Der Farb-Konverter liest jeden gültigen sechsstelligen oder dreistelligen Hex-Wert ein und übersetzt ihn sofort in RGB-Kanäle und die HSL-Darstellung.

Achte darauf, dass Groß- und Kleinschreibung dabei keine Rolle spielt, ein # am Anfang optional ist und Werte mit einer anderen Zeichenzahl als drei oder sechs als ungültig zurückgewiesen werden.

In der Praxis reichen Hex-Codes damit für so gut wie jede Web- oder App-Farbe aus, ohne dass ein größerer Farbraum nötig wäre.

Eine exakte Umrechnung gibt es nicht, weil RAL Classic ein eigener, physikalischer Farbfächer ist und sich nicht verlustfrei in den additiven HEX-/RGB-Farbraum des Bildschirms abbilden lässt.

Der Rechner liefert dir aber den normalisierten Hex- und RGB-Wert, den du gegen die Referenztabelle mit gängigen RAL-Näherungswerten auf dieser Seite abgleichst, etwa RAL 5010 Enzianblau mit #0E4C8B (RGB 14, 76, 139, HSL 210°, 82 %, 30 %).

Für eine farbverbindliche Zuordnung, etwa bei einer Lackierung oder einem Fassadenanstrich, bleibt trotzdem nur der Vergleich mit dem physischen RAL-Fächer unter Normlicht maßgeblich, weil Bildschirmdarstellung, Kalibrierung und Lichtquelle das Ergebnis verschieben.

Nutze die Umrechnung also für die erste Orientierung im digitalen Entwurf, prüfe die finale Farbe aber immer am echten Farbmuster nach.

Rein rechnerisch ja: Aus den RGB-Anteilen R', G', B' (jeweils Kanalwert geteilt durch 255) ergibt sich K = 1 − max(R', G', B') und daraus C = (1 − R' − K) / (1 − K), M entsprechend mit G' und Y entsprechend mit B'.

Für #1E88E5 (R30, G136, B229) liefert das näherungsweise C 87 %, M 41 %, Y 0 % und K 10 %.

Diese Formel ist aber eine geräteunabhängige Näherung ohne Farbmanagement: Der tatsächliche Druck hängt vom Papier, der Druckmaschine und einem kalibrierten ICC-Profil ab, weshalb zwei Druckereien aus demselben RGB-Wert unterschiedliche CMYK-Werte erzeugen können.

Der Farb-Konverter selbst gibt deshalb bewusst kein CMYK aus. Nutze die Näherungsformel nur zur groben Einschätzung vor dem Druck und lass die verbindliche CMYK-Separation immer über ein echtes Farbprofil der Druckerei laufen.

Rechne den Hex-Code zuerst im Farb-Konverter in seine drei RGB-Kanäle um und ergänze dann einen vierten Wert zwischen 0 und 1 für die Deckkraft, zum Beispiel wird aus #1E88E5 (R30, G136, B229) bei 50 % Deckkraft die CSS-Angabe rgba(30, 136, 229, 0.5).

Einen Alpha-Kanal verarbeitet der Rechner selbst nicht, weil Hex, RGB und HSL in der aktuellen Umsetzung ausschließlich volldeckende Farben beschreiben; die RGB-Kanäle aus dem Ergebnis kannst du aber direkt in die rgba()- oder hsla()-Schreibweise übernehmen.

Für hsla() gilt dasselbe Prinzip: Aus den ausgegebenen Werten H=208°, S=79 %, L=51 % wird hsla(208, 79%, 51%, 0.5).

Praktisch eignet sich das etwa für halbtransparente Overlays, Tooltips oder Hover-Zustände, bei denen die Grundfarbe erhalten bleiben, aber der Hintergrund durchscheinen soll.

Dafür brauchst du zuerst ein Pipetten-Werkzeug: In Browsern wie Chrome oder Edge steckt das im DevTools-Farbwähler, unter Windows in den Bordmitteln als "Farbe auswählen" in der Lupe, in Bildbearbeitungsprogrammen wie Photoshop oder GIMP über das Pipetten-Icon direkt in der Werkzeugleiste.

Diese Tools lesen den Hex- oder RGB-Wert des angeklickten Pixels aus, den du danach in den Farb-Konverter einträgst, um ihn zusätzlich als HSL zu sehen oder in ein anderes Format zu übertragen.

Der Konverter selbst analysiert keine Bilddateien und ermittelt keine Pixel, sondern rechnet ausschließlich einen bereits bekannten Hex-, RGB- oder HSL-Wert in die beiden anderen Darstellungen um.

Ein typischer Ablauf: Farbe im Screenshot mit der Pipette aufnehmen, den ausgegebenen Hex-Code hier einfügen und sofort die passenden RGB- und HSL-Werte für dein Styleguide-Dokument ablesen.

Nein, nicht wie beim Mischen von Farbe auf der Palette: Hex-Codes sind additive RGB-Werte, kein subtraktives Pigmentgemisch, deshalb ergibt ein einfaches Aneinanderhängen oder Verrechnen der Hex-Ziffern keine sinnvolle Mischfarbe.

Eine gängige Näherung ist stattdessen, die RGB-Kanäle beider Farben getrennt zu mitteln: Aus #1E88E5 (R30, G136, B229) und #E53935 (R229, G57, B53) würde das arithmetische Mittel R130, G97, B141 ergeben, was du anschließend im Modus "RGB → HEX & HSL" in den Farb-Konverter einträgst, um den passenden Hex-Code und die HSL-Werte zu erhalten.

Diese Kanalmittelung ist trotzdem nur eine technische Näherung und keine wahrnehmungsgetreue Farbmischung, weil sie im linearen sRGB-Raum rechnet statt in einem für das menschliche Auge optimierten Farbmodell.

Für Designentscheidungen bleibt darum der visuelle Vergleich der berechneten Mischfarbe im Layout der zuverlässigere letzte Schritt.