Farb-Konverter: HEX, RGB und HSL Werte umrechnen

Der Rechner akzeptiert sowohl die kurze Drei-Zeichen-Schreibweise wie #ABC als auch die volle Sechs-Zeichen-Schreibweise wie #AABBCC, normalisiert den Wert intern und gibt ihn danach gleichzeitig als HEX, RGB und HSL aus.

Jede HEX-Stelle steht dabei für eine Hexadezimalzahl von 0 bis F, und je zwei Stellen ergeben einen Farbkanal im Bereich 0 bis 255: aus FF werden also 255, aus 00 werden 0.

Damit liest du das Ergebnis sofort in der Darstellung, die du gerade für CSS, ein Designsystem oder eine Übergabe brauchst.

Ein typischer Praxisfall: Wenn ein Farbwert aus einem Ticket oder Screenshot unklar ist, übersetzt du ihn in Sekunden in alle drei Formate und testest ihn direkt im Frontend.

Reine Beispiele sind #000000 als 0, 0, 0 (Schwarz) und #FFFFFF als 255, 255, 255 (Weiss).

Für den Entwickleralltag bedeutet das: Du kopierst den HEX-Code aus einem Design-Tool wie Figma, gibst ihn einmal in den Rechner ein und hast sofort alle drei Notationen für das Styleguide-Dokument, den CSS-Custom-Property-Wert und das RGB-Argument für box-shadow parat.

Kurzformen mit drei Zeichen werden im Farb-Konverter automatisch auf die volle Sechs-Stellen-HEX-Schreibweise erweitert, indem jede einzelne Stelle verdoppelt wird.

Aus #ABC wird damit #AABBCC, aus #F00 wird #FF0000 und aus #FFF wird #FFFFFF (also 255, 255, 255 in RGB). Diese Verdopplung ist kein Zufallsverfahren, sondern die offizielle CSS-Regel, mit der auch Browser dieselbe Expansion vornehmen.

Dadurch siehst du nach der Eingabe sofort die normalisierte Farbe als RGB-Wert sowie in HEX und HSL, exakt so, wie die Render-Engine intern weiterrechnet.

Das ist besonders nützlich, wenn Designvorlagen oder ältere Stylesheets gemischt kurze und lange Codes enthalten und du eine eindeutige, vergleichbare Schreibweise für den Code-Handover brauchst.

So vermeidest du Verwechslungen zwischen scheinbar verschiedenen, aber in Wahrheit identischen Farben.

Beim Abgleich von Brand-Farben über Projekte hinweg hilft das besonders: Ein Kurzcode wie #09F aus einem alten Stylesheet und der Vollcode #0099FF aus einem neueren Token-System bezeichnen exakt dieselbe Farbe, was der Rechner durch die normalisierte Ausgabe eindeutig bestätigt.

Zuerst zerlegt der Rechner den normalisierten Sechs-Stellen-HEX-Wert in drei Paare und liest daraus die Farbkanäle Rot, Grün und Blau als Dezimalzahlen von 0 bis 255 aus: bei #3366CC entstehen so 51, 102 und 204.

Danach werden diese RGB-Werte über die HSL-Standardformeln umgerechnet, wobei zunächst der grösste und der kleinste Kanalwert bestimmt werden.

Aus deren Differenz und Lage berechnet der Rechner den Farbwinkel von 0 bis 360 Grad, die Sättigung von 0 bis 100 Prozent und die Helligkeit von 0 bis 100 Prozent.

So bekommst du aus einem einzigen CSS-Wert sowohl die technischen Kanalzahlen für RGB als auch eine HSL-Sicht für Gestaltungsfragen.

Der umgekehrte Weg funktioniert genauso: Jeder Kanal von 0 bis 255 wird wieder zweistellig hexadezimal geschrieben, etwa 204 als CC, sodass HEX und RGB exakt denselben Farbwert beschreiben.

Als konkretes Referenzbeispiel liefert #3366CC einen Hue von 220 Grad, eine Sättigung von 60 Prozent und eine Helligkeit von 50 Prozent, was ein mittleres Blau mit leichtem Violettstich beschreibt, wie es in Diagrammfarben oder Unternehmenslogos häufig vorkommt.

H steht für den Hue beziehungsweise Farbwinkel auf dem Farbkreis von 0 bis 360 Grad, wobei 0 für Rot, etwa 120 für Grün und etwa 240 für Blau steht.

S bezeichnet die Sättigung von 0 bis 100 Prozent und gibt an, wie kräftig oder ausgewaschen ein Farbton wirkt; bei 0 Prozent bleibt nur ein Grauton übrig. L ist die technische Helligkeit von 0 bis 100 Prozent, also Schwarz bei 0 und Weiss bei 100.

Gerade dieses L wird oft mit der subjektiven Helligkeitswahrnehmung verwechselt, obwohl reines Gelb und reines Blau bei gleichem L-Wert visuell sehr unterschiedlich hell erscheinen.

Der Rechner liefert dir also eine exakte, standardisierte Modellbeschreibung im HSL-Raum, ersetzt aber keine wahrnehmungsbasierte Helligkeitsbewertung, wie sie etwa Kontrast-Tools nach WCAG vornehmen.

Als konkretes Beispiel: Das reine Rot #FF0000 hat den Hue-Wert 0 Grad, die Sättigung 100 Prozent und die Helligkeit 50 Prozent, während das kräftige Orange #FF8000 den Hue-Wert 30 Grad bei unveränderter Sättigung und Helligkeit zeigt.

Wenn die Sättigung gegen 0 Prozent geht, verliert der Farbwinkel praktisch seine Bedeutung, weil ohne Buntheit kein eindeutiger Farbton mehr existiert.

Darum kann bei reinem Schwarz (#000000), Weiss (#FFFFFF) oder einem neutralen Grau wie #808080 ein scheinbar willkürlicher Hue-Wert wie 0 Grad auftauchen, obwohl die Farbe völlig korrekt beschrieben ist.

Mathematisch ist der Farbwinkel an dieser Stelle schlicht nicht definiert und wird per Konvention auf 0 gesetzt.

Für solche Fälle sind der RGB-Wert (etwa 128, 128, 128 für mittleres Grau) und der normalisierte HEX-Code die deutlich verlässlichere Lesart, weil sie unabhängig von der Sättigung eindeutig bleiben.

Lass dich also nicht von einem roten Hue bei einem grauen Ton verunsichern; entscheidend sind hier die identischen RGB-Kanäle, die das Grau zweifelsfrei festlegen.

Ein Vergleich: Das Grau eines typischen Straßenasphalts liegt bei RGB 100, 100, 100 mit vollkommen symmetrischen Kanälen, was der Rechner durch identische R-, G- und B-Werte und eine Sättigung von 0 eindeutig bestätigt.

HEX ist meist die kompakteste Übergabe für Stylesheets und Design-Tokens, weil ein Wert wie #1A73E8 kurz und eindeutig kopierbar ist.

RGB hilft bei Kanalprüfungen und überall dort, wo du einen Alpha-Wert ergänzen willst, etwa rgba(26, 115, 232, 0.5) für 50 Prozent Deckkraft.

HSL ist besonders praktisch, wenn du systematische Varianten ableitest: Du hältst Hue und Sättigung konstant und änderst nur die Helligkeit, um abgestufte Hover- oder Disabled-Zustände einer Farbe zu erzeugen.

Genau deshalb ist der Rechner stark für den ständigen Wechsel zwischen Design-Tool, Styleguide und Code.

Du kannst denselben Farbwert in Sekunden gegen mehrere technische Darstellungen absichern und so verhindern, dass eine Token-Definition in HEX und eine RGB-Angabe im Code unbemerkt auseinanderdriften.

Ein gängiges Muster in Design-Systemen ist es, eine Primärfarbe wie hsl(217, 89%, 61%) als Custom Property zu definieren, alle Varianten durch Änderung nur des L-Wertes zu erzeugen und dann den entsprechenden HEX-Code aus dem Konverter direkt in die Token-Datei zu übernehmen.

Indirekt ja, denn du kannst mit dem Konverter einen Farbwert zuverlässig in genau die technische Darstellung überführen, die ein Kontrast- oder Accessibility-Tool als Eingabe erwartet, etwa saubere RGB-Kanäle oder einen normalisierten HEX-Code.

Die eigentliche Kontrastbewertung nach WCAG übernimmt der Rechner aber nicht: Das Mindestverhältnis von 4,5 zu 1 für normalen Text oder 3 zu 1 für grosse Schrift basiert auf der relativen Leuchtdichte beider Farben und nicht allein auf den HSL- oder HEX-Werten.

Nutze den Konverter deshalb als sauberen Vorlauf, um Vorder- und Hintergrundfarbe eindeutig festzulegen, und gib diese Werte anschliessend in einen WCAG-Kontrastrechner.

So vermeidest du Eingabefehler und stellst sicher, dass die geprüfte Farbe wirklich der im Design verwendeten entspricht und nicht nur einer ungefähr ähnlichen.

Konkret empfiehlt sich der Ablauf: Primärfarbe in den Konverter eingeben, den normalisierten HEX-Wert kopieren, dann in den WebAIM Contrast Checker einfügen und dort gegen den Hintergrundwert #FFFFFF oder #000000 auf das Verhältnis 4,5 zu 1 für Normaltext prüfen.

Der Rechner wandelt zwischen HEX, RGB und HSL um und verarbeitet bewusst keinen Alpha-Kanal, keine ICC-Profile und keine subtraktiven Druckfarbräume wie CMYK.

Das hat einen klaren Grund: HEX, RGB und HSL beschreiben alle denselben additiven RGB-Farbraum des Bildschirms und lassen sich verlustfrei ineinander umrechnen, während CMYK geräte- und papierabhängig ist und nur über ein Farbprofil sauber konvertiert werden kann.

Für Print-Freigaben oder farbverbindliche Proofs reicht eine reine HEX-RGB-Umrechnung deshalb nicht aus, weil dort die tatsächliche Druckausgabe und das ICC-Profil entscheiden.

Als Web- und UI-Werkzeug für CSS-Farben, Design-Tokens und technische Prüfung am Monitor arbeitet der Rechner dagegen exakt und nachvollziehbar.

Für Transparenz nutzt du zusätzlich die rgba-Notation, für den Druck ein farbmanagementfähiges Grafikprogramm.

Wer zum Beispiel ein Logo für Web und Druck gleichzeitig anlegt, verwendet im Browser #1A73E8 als CSS-Wert direkt aus diesem Rechner, beauftragt jedoch eine Druckerei mit einem kalibrierten CMYK-Wert wie C:73 M:53 Y:0 K:9, der nur aus dem Original-ICC-Profil des Farbsystems stammt.