Farbkonverter – HEX zu RGB zu HSL online

Fügen Sie eine Farbe in einem beliebigen Format ein – HEX, RGB oder HSL – und erhalten Sie sofort alle drei Formate sowie ein Farbfeld zur Live-Vorschau. Sie können eine Farbe auch visuell mit dem integrierten Farbwähler auswählen. Ideal für den Austausch von Farben zwischen CSS, Design-Tools und Code.

Was ist dieses Tool?

Farben im Web werden in verschiedenen gleichwertigen Formaten angegeben. HEX (#4f46e5) ist die kompakte Form, die überall in CSS und bei der Übergabe von Designentwürfen verwendet wird. RGB (rgb(79, 70, 229)) gibt die Rot-, Grün- und Blauanteile direkt an, was im Programmierkontext oft erforderlich ist. HSL (hsl(243, 75 %, 59 %)) beschreibt Farbton, Sättigung und Helligkeit – das intuitivste Format zum Anpassen einer Farbe, beispielsweise um sie dunkler oder weniger gesättigt zu machen.

Sie alle bezeichnen dieselbe Farbe; dieses Tool wandelt die Farben exakt um und zeigt eine Vorschau an, damit Sie überprüfen können, ob es sich um die von Ihnen gewünschte Farbe handelt.

Warum sollte man es nutzen?

Akzeptiert jedes Eingabeformat – HEX (3- oder 6-stellig), RGB oder HSL – und gibt alle Formate als Ausgabe aus.
Live-Vorschau des Farbmusters, damit Sie die Farbe sehen und nicht nur Zahlen.
Visuelle Farbauswahl, wenn Sie lieber nach Augenmaß auswählen möchten.
Kopieren mit einem Klick pro Format, bereit für CSS oder Code.
Kostenlos, sofort, kein Upload.

Anleitung

Geben Sie eine Farbe ein oder fügen Sie sie ein: #4f46e5, rgb(79, 70, 229) oder hsl(243, 75 %, 59 %) – alle Formate werden unterstützt.
Oder klicken Sie auf die Farbauswahl und wählen Sie die Farbe visuell aus.
Lesen Sie alle drei Formate in den Ergebnissen und überprüfen Sie das Vorschaufeld.
Klicken Sie neben dem gewünschten Format auf „Kopieren“.

Beispiel

Eingabe

#4f46e5

Ausgabe

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)

Drei Notationen, eine identische Farbe.

Welches Format sollten Sie verwenden?

Alle drei beschreiben genau dieselbe Farbe – bei der Wahl geht es darum, welche Bezeichnung für die jeweilige Aufgabe am einfachsten zu handhaben ist, nicht um Genauigkeit.

Format	Am besten geeignet für	Warum
Hexadezimal (#4f46e5)	CSS, Design-Übergaben, schnelles Kopieren und Einfügen	Am schnellsten einzugeben und einzufügen; das universelle Format in Design-Tools wie Figma.
Rot, Grün, Blau (79, 70, 229)	Code, der Kanäle direkt bearbeitet, Arbeit mit Canvas/Bildern	Entspricht der Art und Weise, wie Grafik-APIs und Bildpixeldaten Farben tatsächlich speichern.
HSL (hsl(243,75 %, 59 %))	Eine Farbe anpassen – heller, dunkler, satter/weniger gesättigt	Helligkeit und Sättigung sind separate Werte, die Sie direkt anpassen können – im Gegensatz zu HEX/RGB, bei denen sich alle Kanäle gleichzeitig verschieben.

Häufige Anwendungsfälle

Eine Farbe in einem Design-Tool visuell auswählen und sie dann in den genauen HEX- oder RGB-Wert umwandeln, der in CSS oder im Code benötigt wird.
Erstellung einer Reihe verwandter Farbtöne (hellere/dunklere Varianten) durch Umwandlung in HSL, Anpassung der Helligkeit und Rückwandlung.
Die einheitliche Verwendung einer Markenfarbe in verschiedenen Tools, die jeweils ein anderes Format erfordern – eine Logodatei im RGB-Format, ein Styleguide im HEX-Format, eine CSS-Variable, die für das Theming das HSL-Format benötigt.
Überprüfung, ob eine aus einem Screenshot oder einer Designdatei extrahierte Farbe (oft als RGB-Wert angegeben) mit dem HEX-Wert in einem Stylesheet übereinstimmt.

Häufig gestellte Fragen

Wann sollte ich HSL anstelle von HEX oder RGB verwenden?

Wenn man eine Farbe analytisch betrachten möchte: Eine Farbe in HSL um 10 % dunkler zu machen, bedeutet, die Helligkeit um 10 Punkte zu verringern; bei HEX oder RGB müsste man alle Kanäle neu berechnen. Designsysteme definieren Paletten oft aus genau diesem Grund in HSL.

Unterstützt das Tool dreistellige HEX-Werte wie #fff?

Ja. #fff ist die Kurzform für #ffffff – jede Ziffer wird verdoppelt. Beide Formen werden akzeptiert, und in der Ausgabe wird die vollständige 6-stellige Form angezeigt.

Wie sieht es mit dem Alpha-Wert (Transparenz) aus?

Dieses Tool konvertiert deckende Farben (die RGB-/HSL-Werte). Wenn Sie Transparenz benötigen, fügen Sie den Alpha-Wert selbst hinzu: rgba(79, 70, 229, 0,5) oder #4f46e580 – der Farbteil bleibt dabei unverändert.

Warum weichen meine HSL-Werte um 1 von denen eines anderen Tools ab?

Rundung. Bei der HSL↔RGB-Umwandlung entstehen Bruchwerte, und die verschiedenen Tools runden unterschiedlich. Eine Abweichung von ±1 im Farbton oder in Prozent ist nicht sichtbar und völlig normal.

Werden Farbnamen wie „rot“ unterstützt?

Nicht in Phase 1 – das Tool konzentriert sich auf die drei Zahlenformate, die Entwickler am häufigsten konvertieren. Geben Sie den HEX-/RGB-/HSL-Wert der Farbe ein oder wählen Sie ihn visuell mit dem Farbwähler aus.

HEX-/RGB-/HSL-Farbkonverter