Farbkonverter — HEX, RGB & HSL
Wandeln Sie jede Farbe zwischen HEX, RGB und HSL um und kopieren Sie den Code sofort — kostenloses Tool für Designer.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)Die Umrechnung geschieht lokal
Sicher für unangekündigte Marken
Kein Konto
Sichere Verbindung
So funktioniert es
- 1
Farbe eingeben
HEX-Code einfügen, RGB-Werte tippen oder HSL einstellen — je nachdem, was vorliegt.
- 2
Die anderen Schreibweisen ablesen
Die übrigen zwei aktualisieren sich sofort, samt Farbfeld des Ergebnisses.
- 3
Kopieren, was Sie brauchen
Nehmen Sie die Schreibweise, die Ihr Stylesheet, Ihr Designwerkzeug oder Ihr Markendokument verwendet.
Warum dieses Tool
Drei Schreibweisen gleichzeitig
HEX, RGB und HSL bleiben synchron, sobald Sie eine davon ändern — kein zweiter Umrechnungsschritt zur Kontrolle.
In HSL arbeiten, in HEX übergeben
HSL ist das Modell, über das sich denken lässt; HEX ist das, was die meisten Stylesheets und Designdateien weiterhin verlangen.
Live-Farbfeld
Die Farbe wird beim Tippen gezeichnet, ein Tippfehler in einem Hex-String fällt also sofort auf.
Kopieren mit einem Klick
Holen Sie genau den String, den Ihr CSS, Ihre Tailwind-Konfiguration oder Ihr Designwerkzeug erwartet — korrekt formatiert.
Nichts wird hochgeladen
Die Umrechnung ist Arithmetik in Ihrem Browser — kein Wert wird irgendwohin gesendet.
Kostenlos, ohne Konto
Keine Anmeldung, keine Begrenzung der Umrechnungen und nirgends ein Wasserzeichen.
HEX, RGB und HSL beschreiben dieselbe Farbe unterschiedlich
Alle drei Schreibweisen adressieren dieselben Bildschirmfarben; sie unterscheiden sich darin, wie die Zahl aufgebaut ist — und dieser Aufbau entscheidet, welche für eine bestimmte Aufgabe handlicher ist. HEX packt drei Werte in einen kompakten String: `#3B82F6` steht für Rot 59, Grün 130, Blau 246, geschrieben zur Basis 16. RGB nennt diese drei Kanäle direkt. HSL gliedert dieselbe Information in Farbton (welche Farbe, als Winkel von 0 bis 360), Sättigung (wie kräftig, 0 bis 100 %) und Helligkeit (wie hell, 0 bis 100 %). Die Umrechnung verliert nichts: `#3B82F6`, `rgb(59, 130, 246)` und `hsl(217, 91%, 60%)` sind dieselbe Farbe, dreifach geschrieben.
Warum sich HSL zu lernen lohnt
Mit HEX und RGB lässt sich schwer argumentieren, weil eine Farbänderung bedeutet, drei Zahlen gleichzeitig zu ändern, ohne erkennbaren Bezug zu dem, was Sie sehen. Hellen Sie ein Blau in RGB auf, müssen Sie alle drei Kanäle um geschätzte Beträge anheben. In HSL ist dieselbe Änderung eine einzige Zahl: Helligkeit erhöhen. Sie wollen eine gedämpfte Fassung einer Markenfarbe? Sättigung senken, Rest belassen. Sie brauchen einen Hover-Zustand etwas dunkler als die Grundfarbe? Zehn von der Helligkeit abziehen. Deshalb ist HSL auch der praktische Weg, eine Farbskala aufzubauen: Farbton und Sättigung festhalten, Helligkeit in Schritten variieren — und die Familie bleibt durch ihre Konstruktion stimmig statt durch Ausprobieren.
Wo welche Schreibweise wirklich vorkommt
HEX beherrscht die Designübergabe: Markenhandbücher, Figma und die meisten Stylesheets geben Farben weiterhin als sechsstellige Codes an, und es ist das Format, das Ihnen eine Kundin oder eine Druckerei am ehesten schickt. RGB taucht dort auf, wo Kanäle programmatisch bearbeitet werden, und in der Form `rgba()`, sobald Transparenz ins Spiel kommt. HSL setzt sich zunehmend als das von Hand geschriebene CSS-Format durch, gerade weil ein Wartender `hsl(217, 91%, 60%)` liest und weiß, dass es ein sattes Blau mittlerer Helligkeit ist, während `#3B82F6` ihm bis zur Darstellung nichts sagt. Ein verbreiteter Ablauf ist, beim Entwerfen in HSL zu denken und für das Übergabedokument nach HEX umzurechnen — genau die Umrechnung, für die dieses Werkzeug existiert.
Einen HEX-Code ohne Umrechner lesen
Ein sechsstelliger HEX-Code besteht aus drei Paaren: Rot, Grün, Blau, jeweils von `00` bis `FF` (0 bis 255). Zwei Muster lohnt es sich mit dem Auge zu erkennen. Sind alle drei Paare gleich — `#333333`, `#CCCCCC` — ist die Farbe ein neutrales Grau, und je höher der Wert, desto heller. Dominiert ein Paar deutlich, ist dieser Kanal die Farbe: `#CC3333` liest sich als Rot, `#33CC33` als Grün. Das genügt, um einen offensichtlichen Fehler vor der Darstellung zu bemerken, aber nicht, um zu beurteilen, ob zwei Farben nah beieinanderliegen — und genau dort ist die Umrechnung nach HSL samt Vergleich der drei Komponenten schneller als das Starren auf Hex-Strings.
Eine Farbe umrechnen heißt nicht, sie zu prüfen
Ein Umrechner sagt Ihnen, welche Farbe vorliegt, nicht ob sie auf ihrem Hintergrund lesbar ist. Das sind zwei Fragen, und die zweite hat einen Schwellenwert statt einer Meinung: Die WCAG verlangt für normalen Fließtext ein Kontrastverhältnis von mindestens 4,5:1. Ein Farbpaar kann perfekt markenkonform sein und trotzdem daran scheitern. Trägt die umgerechnete Farbe Text — oder ist sie der Text — schicken Sie das Paar vor der Festlegung durch die Kontrastprüfung. Ebenso gilt: Bauen Sie eine Farbmenge auf, statt eine einzelne umzurechnen, arbeitet der Palettengenerator mit Beziehungen zwischen Farbtönen — etwas, das die Umrechnung allein nicht leistet.
Alpha, Transparenz und die achtstellige Form
Sowohl HEX als auch RGB haben transparente Varianten: Achtstelliges HEX hängt zwei Alpha-Zeichen an, und `rgba()` ergänzt einen vierten Wert von 0 bis 1. Dieses Werkzeug rechnet die deckende sechsstellige Form um, die Markendokumente, Designdateien und die überwiegende Mehrheit der Stildeklarationen verwenden. Brauchen Sie Transparenz, rechnen Sie hier die volle Farbe um und ergänzen den Alphakanal in Ihrem Stylesheet — so bleibt die Grundfarbe eine einzige Quelle der Wahrheit und jede Verwendung setzt ihre eigene Deckkraft, statt Dutzende beinahe identischer halbtransparenter Varianten in die Palette einzubacken.
Häufige Fehler, die Sie vermeiden sollten
- Eine Farbe über die RGB-Kanäle nachjustieren. Sie in RGB aufzuhellen oder zu dämpfen heißt, drei Zahlen um geschätzte Beträge zu ändern. Rechnen Sie nach HSL um, ändern Sie die eine Komponente, die Ihr Ziel beschreibt, und rechnen Sie zurück.
- Eine Farbskala nach Augenmaß zusammenstellen. Die Helligkeit in HSL zu staffeln und Farbton wie Sättigung festzuhalten ergibt eine stimmige Familie; von Hand gewählte Hex-Codes ergeben eine, deren Farbton wandert und deren Mitte schlammig wirkt.
- Annehmen, eine umgerechnete Farbe sei barrierefrei. Umrechnung ist Arithmetik und sagt nichts über Lesbarkeit — das Paar muss weiterhin 4,5:1 für Fließtext erreichen, und das verrät nur eine Kontrastprüfung.
- Einen Hex-Code ohne Raute — oder mit — in ein Feld kopieren, das die jeweils andere Form erwartet. Beide Schreibungen sind verbreitet und keine wird überall akzeptiert; prüfen Sie, was Ihr Werkzeug verlangt, statt es anzunehmen.
- Erwarten, dass eine Bildschirmfarbe identisch druckt. HEX, RGB und HSL beschreiben allesamt Licht, das ein Display abstrahlt; der Druck arbeitet mit CMYK-Farben, und kräftige Bildschirmfarben — besonders satte Blau- und Grüntöne — haben keine exakte Entsprechung in Druckfarbe.
Im Vergleich
| KeroTools | Designsoftware | Umrechner in Suchmaschinen | |
|---|---|---|---|
| HEX, RGB, HSL gemeinsam | Alle drei, live | Ja | Meist eines nach dem anderen |
| Werte gehen an einen Server | Nie | Nein | Häufig |
| Live-Farbfeld | Ja | Ja | Manchmal |
| Konto oder Lizenz | Weder noch | Lizenz erforderlich | Weder noch |
| Funktioniert offline | Nach dem ersten Laden | Ja | Nein |
| Kosten | Kostenlos | Kostenpflichtig | Kostenlos |
Funktionen
HEX ein und aus
Sechsstellige Schreibweise, mit oder ohne führendes Rautezeichen.
RGB ein und aus
Drei Kanäle von 0 bis 255, in dem Format, das CSS direkt annimmt.
HSL ein und aus
Farbton in Grad, Sättigung und Helligkeit in Prozent — das Modell, in dem Gestaltende tatsächlich denken.
Live-Farbvorschau
Ein Farbfeld zeigt den aktuellen Wert, sodass Fehler mit dem Auge auffallen.
In beide Richtungen
Ändern Sie eine der drei, die anderen beiden folgen; es gibt kein festes Quellfeld.
Kopierfertige Strings
Die Ausgabe ist so formatiert, dass sie ohne Nacharbeit direkt ins CSS passt.
Keine Installation
Nichts herunterzuladen oder zu installieren — es läuft auf der Webseite.
Arabisch- und RTL-tauglich
Vollständige Oberfläche in acht Sprachen, einschließlich Arabisch von rechts nach links.
Standardmäßig sicher
Über HTTPS ausgeliefert, ohne Datei-Tracking und ohne Upload an Dritte.
Wer es nutzt
Frontend-Entwickelnde
Die HEX-Übergabe einer Designerin in die HSL-Werte überführen, mit denen sich ein Stylesheet leichter pflegen lässt.
Gestaltende
Eine Markenfarbe in HSL lesen, um Aufhellungen und Abdunklungen derselben Farbtonfamilie zu bauen.
Marketing und Markenverantwortliche
Aus einer einzigen Markenfarbe genau die Schreibweise gewinnen, die der Theme-Editor jeder Plattform verlangt.
Alle, die ein Theme anpassen
Eine aus einem Werkzeug übernommene Farbe in ein Feld einpassen, das ein anderes Format erwartet.
Häufig Gestellte Fragen
Nein. Alles läuft lokal im Browser — nichts wird hochgeladen, gespeichert oder geteilt.
Ja — komplett kostenlos, ohne Konto und ohne Limits.