HEX-zu-HSL-Konverter

1. Geben Sie eine 3- oder 6-stellige HEX-Farbe mit oder ohne führendes # ein oder wählen Sie eine Farbe mit dem Farbwähler.
2. Passen Sie den Farbton von 0 bis 360 Grad oder Sättigung und Helligkeit von 0 % bis 100 % an.
3. Prüfen Sie die Live-Vorschau und die synchronisierten HEX-, HSL- und RGB-Werte.
4. Verwenden Sie die Kopierschaltfläche neben dem gewünschten Wert.
5. Wählen Sie Zurücksetzen, um zur Standardfarbe zurückzukehren.

HEX-zu-HSL-Konverter

HEX und HSL sind zwei Darstellungen derselben Farbe. HEX kodiert Rot-, Grün- und Blaukanäle als hexadezimale Paare. HSL beschreibt Farbton, Sättigung und Helligkeit, wodurch sich Farben oft direkter visuell anpassen lassen. Dieser Editor wandelt eine HEX-Farbe in HSL und RGB um und ermöglicht Änderungen an den HSL-Werten, um Farbvarianten zu erstellen.

Was ist HEX?

Eine standardmäßige sechsstellige HEX-Farbe verwendet das Format #RRGGBB mit je einem hexadezimalen Wertepaar für Rot, Grün und Blau. #4F46E5 entspricht beispielsweise ungefähr den RGB-Werten 79, 70 und 229. HEX-Farben werden in HTML und CSS häufig für Text, Hintergründe, Rahmen, Schaltflächen und weitere Oberflächenelemente verwendet. Das vorangestellte # ist in diesem Konverter optional.

Was ist HSL?

HSL steht für Farbton, Sättigung und Helligkeit. Der Farbton bezeichnet eine Position auf einem 360-Grad-Farbkreis. Die Sättigung beschreibt die Farbintensität von 0 % (neutralem Grau) bis 100 %. Die Helligkeit gibt an, wie hell oder dunkel die Farbe ist: 0 % bedeutet Schwarz, 50 % den Mittelwert und 100 % Weiß.

Beispiel für HEX zu HSL

Geben Sie #4F46E5 ein, um ungefähr hsl(248, 76 %, 59 %) und rgb(79, 70, 229) zu erhalten. Die angezeigten HSL-Kanäle werden auf ganze Zahlen gerundet und sind eine praktische Darstellung, keine Anzeige aller Dezimalstellen der Umrechnung.

Farben mit HSL bearbeiten

Ändern Sie nach der Eingabe einer HEX-Farbe Farbton, Sättigung oder Helligkeit, um Varianten auszuprobieren. Erhöhen Sie beispielsweise die Helligkeit für einen helleren Hintergrund oder verringern Sie die Sättigung für eine gedecktere Farbe. Vorschau und HEX-, HSL- und RGB-Werte bleiben synchronisiert, sodass Sie den neuen HEX-Wert direkt in CSS oder ein Designwerkzeug kopieren können.

HEX, RGB und HSL

HEX stellt Rot-, Grün- und Blaukanäle hexadezimal dar; RGB verwendet numerische Werte für diese Kanäle; HSL nutzt Farbton, Sättigung und Helligkeit. Es sind verschiedene Darstellungen derselben Farbe. #4F46E5 entspricht beispielsweise rgb(79, 70, 229) und ungefähr hsl(248, 76 %, 59 %).

Unterstützte HEX-Werte und Prüfung

Der Editor akzeptiert 3- und 6-stellige HEX-Farben mit oder ohne #. Eine separate Umrechnung für 8-stelliges HEX oder Transparenz gibt es nicht. Der Farbton muss zwischen 0 und 360 Grad, Sättigung und Helligkeit müssen zwischen 0 % und 100 % liegen. Ungültige Werte zeigen bis zur Korrektur eine Fehlermeldung.

Wann ein HEX-zu-HSL-Konverter hilfreich ist

Wandeln Sie eine vorhandene CSS-Farbe in HSL um, passen Sie eine Markenfarbe für Hover- oder Aktivzustände an, erstellen Sie hellere oder gedecktere Oberflächenfarben, entwickeln Sie Paletten oder vergleichen Sie Farbdarstellungen beim CSS-Debugging. Bearbeiten Sie HSL direkt und kopieren Sie anschließend den aktualisierten HEX-, HSL- oder RGB-Wert.

Geben Sie eine 3- oder 6-stellige HEX-Farbe ein, um synchronisierte HSL- und RGB-Werte sowie eine Live-Farbvorschau zu sehen.

Passen Sie die HSL-Kanäle direkt an. Farbe, HEX- und RGB-Werte sowie Vorschau werden automatisch aktualisiert.

Geben Sie einen HEX-Wert mit oder ohne # ein oder wählen Sie eine Farbe mit dem integrierten Farbwähler aus.

Kopieren Sie HEX-, HSL- oder RGB-Ausgaben einzeln oder setzen Sie den Editor auf die Standardfarbe zurück.