Farbkonverter

Dieser Farbkonverter rechnet einen HEX-Farbcode in RGB und HSL um, und ebenso in jede andere Richtung. Tippen Sie #22c55e ein, zeigen die RGB-Felder 34, 197, 94 und die HSL-Felder 142, 71, 45. Ändern Sie eine der drei Schreibweisen, ziehen die beiden anderen nach, und ein Farbfeld zeigt das Ergebnis. Die Berechnung läuft in einem Rust-Modul, das zu WebAssembly kompiliert ist, direkt in Ihrem Browser-Tab.

HEX in RGB umrechnen: so geht's

1. Geben Sie einen 6-stelligen HEX-Code in das Feld Hex ein. Das führende # ist optional (22c55e und #22c55e funktionieren beide), Großbuchstaben ebenfalls.
2. Sobald sechs Stellen vorhanden sind, zeigen die Felder R, G und B die Rot-, Grün- und Blaukanäle (0 bis 255), die Felder H, S und L Farbton (0 bis 360), Sättigung und Helligkeit (0 bis 100).
3. Für die Gegenrichtung tragen Sie Zahlen in die RGB-Felder ein: HEX-Code und HSL-Werte werden bei jedem Tastendruck neu berechnet. Dasselbe gilt für die HSL-Felder.
4. Kopieren Sie den benötigten Wert aus seinem Feld. Das Farbfeld oben zeigt immer die aktuelle Farbe.

HEX, RGB oder HSL: welche Schreibweise wofür?

Alle drei beschreiben dieselbe sRGB-Farbe. Sie unterscheiden sich darin, was sie einfach machen.

Schreibweise	Beispiel	Typischer Einsatz
HEX	#22c55e	Design-Übergabe, CSS-Variablen, Corporate-Design-Handbuch, Werte aus Figma
RGB	34, 197, 94	Code mit numerischen Kanälen (Canvas, Bildverarbeitung, Farbkonstruktoren unter Android oder iOS), rgba() von Hand schreiben
HSL	142, 71%, 45%	Hellere und dunklere Abstufungen: Farbton und Sättigung bleiben, die Helligkeit ändert sich

Für Paletten ist HSL am praktischsten. Ein Hover-Zustand, der etwas dunkler ist als der Button, hat denselben Farbton und dieselbe Sättigung, nur ein paar Punkte weniger Helligkeit. In HEX müssten Sie drei Kanäle gleichzeitig schätzen. Hier fügen Sie den HEX-Wert der Marke ein, verschieben L im HSL-Feld und lesen den neuen HEX-Code ab.

Genauigkeit und Sonderfälle

• HSL wird auf ganze Zahlen gerundet: Farbton, Sättigung und Helligkeit erscheinen als Ganzzahlen. Ein Umweg über HSL kann deshalb einen Kanal um eins verschieben. Beispiel: #22c55e ergibt 142, 71, 45, und diese HSL-Werte zurückgerechnet ergeben #21c45d. Wenn exakte Werte zählen, bleiben Sie bei HEX oder RGB als Referenz.
• HEX-Ausgabe in Kleinbuchstaben: Nach einer Eingabe in RGB oder HSL steht im HEX-Feld #rrggbb in Kleinbuchstaben.
• Nur 6-stellige HEX-Codes: Die Kurzform #fff und 8-stellige Codes mit Alphakanal werden nicht umgerechnet. Die Kurzform erweitern Sie, indem Sie jede Stelle verdoppeln (#fff wird zu #ffffff).
• Kein Alphakanal: Der Konverter arbeitet mit deckenden Farben. Transparenz ergänzen Sie danach im CSS als vierten Wert in rgba() oder hsla().
• Begrenzung: RGB-Werte über 255 und HSL-Werte außerhalb ihrer Grenzen werden vor der Umrechnung auf den gültigen Bereich gesetzt. Ungültige HEX-Zeichen erzeugen eine Fehlermeldung statt einer falschen Farbe.
• Grautöne ohne Farbton: Sind R, G und B gleich, ist die Sättigung 0 und der Farbton wird als 0 angegeben, weil er für neutrale Farben nicht definiert ist.

Typische Anwendungsfälle

• Vom Design zum Code: Der Styleguide liefert #0f172a, der Code erwartet RGB-Tupel. Einmal einfügen, drei Zahlen kopieren.
• Theme-Tokens: Varianten für Hover, Active und Disabled über die Helligkeit in HSL ableiten.
• Barrierefreiheit: Exakte RGB-Kanäle für eine Kontrastberechnung nach WCAG oder BITV ablesen.
• CSS-Debugging: Die DevTools zeigen rgb(9, 9, 11), und Sie suchen den passenden HEX-Wert im Stylesheet.

Im Vergleich zu Desktop-Software und Kommandozeile

Figma, Photoshop oder GIMP zeigen HEX und RGB im Farbwähler, was genügt, wenn die Datei ohnehin offen ist. In den Chrome-DevTools schaltet ein Umschalt-Klick auf das Farbfeld zwischen den Formaten um. Im Terminal rechnet printf "%d %d %d" 0x22 0xc5 0x5e HEX in RGB um, für HSL braucht es ein Skript. Diese Seite erspart das Öffnen einer Anwendung und das Merken von Formeln, mit allen drei Schreibweisen gleichzeitig im Blick.

Ihre Farbwerte bleiben auf Ihrem Gerät

Unveröffentlichte Markenpaletten und Farbvorgaben von Kunden sind bis zum Launch vertraulich. Die Umrechnungsfunktionen laufen als WebAssembly in Ihrem Tab: Die eingegebenen Werte werden weder an einen Server gesendet noch protokolliert oder gespeichert. Es überschreitet also kein einziges Byte eine Netzwerkgrenze, und es entsteht keine Datenverarbeitung bei Dritten im Sinne der DSGVO. Nach dem Laden funktioniert die Seite auch offline, was Sie im Netzwerk-Tab der Entwicklertools prüfen können.

Häufige Fragen

Wie rechne ich HEX in RGB um?

Teilen Sie die sechs Stellen in drei Paare und lesen Sie jedes als Hexadezimalzahl: 22 ist 34, c5 ist 197, 5e ist 94. Das Tool erledigt das beim Tippen und liefert zusätzlich den HSL-Wert.

Kann ich RGB in HEX umrechnen?

Ja. Tragen Sie Werte von 0 bis 255 in die Felder R, G und B ein: Das HEX-Feld zeigt den passenden Code in Kleinbuchstaben.

Warum ändert sich meine Farbe nach einer HSL-Eingabe leicht?

HSL-Werte werden auf ganze Zahlen gerundet, daher kann die Rückrechnung nach RGB pro Kanal um eins von der Ausgangsfarbe abweichen. Für exakte Werte bearbeiten Sie HEX oder RGB.

Werden 3- oder 8-stellige HEX-Codes unterstützt?

Nein, nur 6-stellige. Erweitern Sie #abc zu #aabbcc und entfernen Sie bei 8-stelligen Codes die letzten beiden Stellen (sie enthalten den Alphawert).

Unterstützt der Konverter Transparenz?

Nein, er rechnet deckende Farben um. Den Alphawert ergänzen Sie im CSS, zum Beispiel rgba(34, 197, 94, 0.5).

Welcher Farbraum wird verwendet?

Der Standard-Farbraum sRGB, wie in CSS. HSL ist hier die Darstellung derselben sRGB-Farbe als Farbton, Sättigung und Helligkeit.

Werden meine Farbwerte übertragen?

Nein. Alles wird lokal in WebAssembly berechnet, keine Anfrage enthält Ihre Eingaben.

Verwandte Tools: Um die dominanten Farben aus einem Screenshot oder Foto zu ziehen, nutzen Sie den Farbpaletten-Extraktor und rechnen jede Farbe hier um. Der Favicon-Generator erstellt Favicon-Dateien und Web-App-Icons aus einem einzigen Bild, und der lokale Workflow für Designer bündelt die übrigen Tools für eine Design-Übergabe.