HEX to HSL
Jedes Farbformat beschreibt dasselbe in einer anderen Sprache: HEX für Stylesheets, RGB für Bildschirme und Code, HSL für Paletten, CMYK für Druck. Wählen Sie die gewünschte Umwandlung und erhalten Sie den genauen Wert, eine Live-Vorschau und die Formel.
Diese Farbe in jedem Format
Dieselbe Farbe als HEX, RGB, HSL und CMYK. Jeden Wert kopieren.
HEX in HSL umrechnen
Jede Umrechnung normalisiert HEX zuerst auf ein sRGB-Tripel (Rot, Grün, Blau von 0–255) und kodiert es dann als HSL. Beide Schreibweisen beschreiben dasselbe Pixel, die sichtbare Farbe bleibt gleich.
Eingabe lesen
Den HEX-Wert in Kanäle zerlegen (Hex-Paare, Zahlen oder Prozentwerte).
Auf sRGB normalisieren
Jeden Kanal auf 0–255 skalieren, damit sich Rundungsfehler nicht summieren.
HSL kodieren
Das Ergebnis in HSL ausgeben und in Stylesheet oder Design-Tool einfügen.
Formel
#FF5733 → sRGB rgb(255,87,51) → HSL hsl(11, 100%, 60%)
Rechenbeispiel
#FF5733 = #FF5733 = hsl(11, 100%, 60%)
Kanäle werden auf ganze Zahlen gerundet; für den Rückweg dasselbe Tool nutzen, um Drift zu vermeiden.
HEX-zu-HSL-Referenztabelle
Häufige Werte, mit derselben Formel umgerechnet.
| Eingabe (HEX) | Ergebnis (HSL) | |
|---|---|---|
#FF5733 | hsl(11, 100%, 60%) | |
#4F46E5 | hsl(243, 75%, 59%) | |
#2ECC71 | hsl(145, 63%, 49%) | |
#3498DB | hsl(204, 70%, 53%) | |
#E74C3C | hsl(6, 78%, 57%) | |
#19AE99 | hsl(172, 75%, 39%) | |
#9B59B6 | hsl(283, 39%, 53%) | |
#F39C12 | hsl(37, 90%, 51%) | |
#34495E | hsl(210, 29%, 29%) | |
#E91F63 | hsl(340, 82%, 52%) | |
#000000 | hsl(0, 0%, 0%) | |
#FFFFFF | hsl(0, 0%, 100%) |