HEX-zu-HSL-Konverter

Was ist ein HEX-zu-HSL-Konverter?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Kernfunktionen

Alternativen zum HEX-zu-HSL-Konverter

HEX-zu-HSL-Beispiele

#3b82f6

#FF5733

#3b82f6

#FF573380

Häufige HEX → HSL Konvertierungen

Referenztabelle der 10 am häufigsten konvertierten HEX-Codes und ihrer HSL-Entsprechungen — reine Primärfarben, reine Sekundärfarben und zwei reale Markenfarben aus der Tailwind-Palette.

So nutzen Sie den HEX-zu-HSL-Konverter

1. 1

   HEX-Code in das HEX-Feld einfügen

   Legen Sie einen beliebigen HEX-Wert in die HEX-Eingabe — mit oder ohne führendes `#`, als 3-stellige Kurzform (`#F73`), 6-stellige Vollform (`#3b82f6`), 4-stellige Alpha-Kurzform (`#F738`) oder 8-stellige Alpha-Vollform (`#FF573380`). Das Tool normalisiert alle fünf Eingabeformen intern zur gleichen kanonischen Farbe. Groß-/Kleinschreibung ist egal (`#3b82f6` und `#3B82F6` werden identisch geparst). Ungültige Zeichen oder eine falsche Stellenzahl erzeugen einen dezenten Inline-Fehler; gültiger HEX aktualisiert jedes andere Formatfeld in Echtzeit, einschließlich HSL.

2. 2

   HSL-Tripel aus dem HSL-Feld ablesen

   Das HSL-Feld unter dem HEX-Feld zeigt den passenden `hsl()`-Wert in der modernen leerzeichengetrennten Syntax von CSS Color 4: `hsl(217 91% 60%)` für eine deckende Farbe, `hsl(217 91% 60% / 0.5)` für eine mit Alpha. Der Farbton ist eine ganzzahlige Gradangabe von 0 bis 360; Sättigung und Helligkeit sind ganzzahlige Prozentwerte von 0 bis 100. Die Werte werden für die Anzeige gerundet — die interne OKLCH-Source-of-Truth des Tools bedeutet, dass die zugrundeliegende Präzision Float ist, sodass Rundläufe zurück zu HEX stabil bleiben.

3. 3

   Auf Kopieren klicken, um die HSL-Zeichenkette zu übernehmen

   Jede Formatkarte hat rechts einen Kopieren-Knopf. Ein Klick und der Wert landet in der Zwischenablage — die Beschriftung blinkt kurz „Kopiert!“, damit Sie es sehen. Die kopierte Zeichenkette folgt der kanonischen CSS-Color-4-Syntax (`hsl(217 91% 60%)`); falls Ihr Ziel die alte Komma-Form benötigt (`hsl(217, 91%, 60%)`), ist die Konvertierung mechanisch. Für plattformspezifische Ausgaben (Tailwind v4, SwiftUI, Compose, Flutter) nutzen Sie den Abschnitt Als Code kopieren unter dem Picker — diese Snippets geben das Format aus, das jede Plattform nativ erwartet.

4. 4

   Ebenfalls sichtbar: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, benannte Farbe

   Derselbe HEX, den Sie einfügen, leuchtet auch in den anderen Formatfeldern auf — RGB für Canvas-Aufrufe und Hardware, OKLCH und OKLAB für perzeptuell uniforme Designsysteme, HSV und HWB für Designer-Farbwähler-Workflows, CMYK für Druckschätzungen und der nächstgelegene benannte CSS-Farbname für Dokumentation und Fließtext. Sie sind nie nur auf HEX → HSL festgelegt. Wenn Sie zusätzlich das OKLCH-Tripel für einen Tailwind-v4-`@theme`-Block brauchen (wo wahrgenommene Helligkeit mehr zählt als das gamma-verquickte L von HSL), steht es direkt im OKLCH-Feld mit eigenem Kopieren-Knopf bereit.

5. 5

   Picker nutzen, um die Helligkeit visuell zu durchlaufen

   Unter dem Formatraster befindet sich ein SL-Quadrat + Farbton-Schieberegler + Alpha-Schieberegler für die visuelle Erkundung. Das SL-Quadrat bildet direkt auf die Sättigung-×-Helligkeits-Ebene von HSL ab: vertikal ziehen, um L von 0 % bis 100 % zu durchlaufen, während Sie in Echtzeit zusehen, wie das HSL-Feld aktualisiert wird. Nützlich, um eine helle oder dunkle Tönung visuell zu erzeugen, bevor Sie den exakten Prozentwert fixieren. In Chromium-basierten Browsern (Chrome, Edge, Brave) aktiviert der EyeDropper-Knopf die native `EyeDropper`-API, um einen beliebigen Bildschirmpixel abzutasten — auch außerhalb des Browserfensters.

Häufige HEX-/HSL-Fehler

L in HSL für eine 9-stufige Palette durchlaufen:
hsl(120 100% 50%) und hsl(240 100% 50%) beim selben L
wirken sichtbar unterschiedlich hell — die Palette fühlt sich ungleichmäßig an.

Stattdessen L in OKLCH durchlaufen:
oklch(0.7 0.2 130) und oklch(0.7 0.2 250)
wirken gleich hell; die Palette liest sich über alle Farbtöne kohärent.

Lineare Interpolation von H=350 nach H=10:
(350 + 10) / 2 = 180° (Cyan-Mittelpunkt)
falsch — geht den langen Weg um den Farbkreis.

Kurzpfad-Farbton-Interpolation:
Mittelpunkt = ((350 + 10 + 360) / 2) % 360 = 0° (Rot-Mittelpunkt)
geht durch Rot, den kurzen Weg um den Farbkreis.

HSV-Werte aus Photoshop in eine CSS-hsl()-Regel einfügen:
Photoshop HSB 0, 100, 100 (reines Rot)
CSS hsl(0 100% 100%) rendert als Weiß — völlig falsche Farbe.

HSV → HSL vor dem Einfügen in CSS konvertieren:
HSV 0, 100, 100 → HSL 0, 100 %, 50 %
CSS hsl(0 100% 50%) rendert als reines Rot — korrekt.

HSL ohne Prozentzeichen ausgeben:
hsl(217 91 60)
CSS-Parse-Fehler — jeder Browser ignoriert die gesamte Regel.

HSL mit Prozentzeichen auf S und L ausgeben:
hsl(217 91% 60%)
Gültiges CSS — funktioniert in jedem Evergreen-Browser und IE 9+.

Wer nutzt HEX zu HSL

Frontend-Entwickler definieren HSL-CSS-Variablen

Definieren Sie einmal `--primary: hsl(217 91% 60%)` aus dem Figma-HEX und komponieren Sie dann `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)`, indem nur die L-Zahl angepasst wird. HEX einmal einfügen, das HSL-Tripel ablesen, in den CSS-Custom-Property-Block einsetzen. Das Muster, mit dem klassische Designsysteme ihre Tönungen und Schattierungen tonal kohärent hielten, bevor OKLCH-basierte Stufenleitern übernahmen.

Designer übersetzen HEX in HSL-Picker

Designer, die mit Farbton-+-Sättigung-+-Wert-Pickern aufgewachsen sind (Adobe, Sketch, der HSB-Modus von Figma), wollen das HSL-Tripel oft, selbst wenn die Quelldatei HEX ausliefert. Den HEX einmal einzufügen, erzeugt das passende HSL, bereit für die mentale Farbkreis-Position des Designers, ohne eine manuelle Schätzung. Hilfreich, wenn Sie eine Marken-Farbspezifikation prüfen und wissen wollen, wo sie auf dem Farbkreis im Verhältnis zu anderen Markenfarben der Familie sitzt.

Autoren von Theme-Systemen berechnen Dark-Mode-Tokens

Dark-Mode-Theming kehrt häufig L um, behält aber H und S — eine helle `hsl(217 91% 60%)`-Primary bildet auf eine dunkle `hsl(217 91% 40%)` (oder ähnliches) ab. Den Hell-Modus-HEX einfügen, das HSL ablesen, das Dark-Mode-L berechnen, das neue HSL zurück in den Dark-Theme-Token schreiben. Das Muster ist mechanisch, wenn Sie das HSL-Tripel haben; mit rohen RGB-Kanälen ist es deutlich umständlicher.

Autoren von Designsystemen erzeugen Tint- und Shade-Stufenleitern

Erzeugen Sie eine 9-stufige Tint-/Shade-Stufenleiter, indem Sie L durchlaufen: `hsl(217 91% 95%)` (am hellsten), 85 %, 75 %, 65 %, 55 %, 45 %, 35 %, 25 %, `hsl(217 91% 15%)` (am dunkelsten). Den Basis-HEX einfügen, das HSL ablesen, L mental oder im Code in 10-%-Schritten durchlaufen. (Für perzeptuell uniforme Stufenleitern, in denen jeder Schritt gleich hell aussieht, wechseln Sie zum nebenan liegenden OKLCH-Feld — HSL-Stufenleitern wirken über Farbtöne hinweg ungleichmäßig, weil L nicht perzeptuell uniform ist.)

CSS-Autoren nutzen die Laufzeit-Mathematik hsl(from ...)

Modernes CSS unterstützt die Syntax `color-function-from`: `hsl(from var(--primary) h s calc(l + 10%))` leitet zur Renderzeit eine hellere Variante von `--primary` ab, ohne jeden Schritt vorzuberechnen. Marken-HEX einfügen, das HSL-Tripel bestätigen, die Basis in eine CSS-Variable ablegen und die Laufzeit-Mathematik für abgeleitete Tokens verwenden. Wird in Chrome 119+, Safari 17.2+, Firefox 128+ ausgeliefert.

Frontend-Entwickler bauen Tailwind-v3-HSL-Token-Sätze

Tailwind v3 speicherte Theme-Farben als leerzeichengetrennte HSL-Tripel in CSS-Variablen (`--primary: 217 91% 60%`), zusammengesetzt über `hsl(var(--primary))` in `tailwind.config.js`. Marken-HEX einfügen, das HSL ablesen, die drei Zahlen (ohne den `hsl(...)`-Wrapper) in die Variablendefinition ablegen. Tailwind v4 ist seither auf OKLCH-zuerst umgeschwenkt, v3-Codebases nutzen aber weiter das HSL-Muster und werden das noch jahrelang tun.

Autoren von Farbwähler-UIs bilden HEX auf HSL-Bedienelemente ab

Einen Farbwähler zu bauen, der Farbton / Sättigung / Helligkeit als drei separate Schieberegler exponiert (die klassische Adobe-artige UI), bedeutet, einen eingehenden HEX auf die drei Bedienelemente des Pickers abzubilden. HEX hier einfügen, das HSL-Tripel ablesen, die drei Schieberegler programmatisch positionieren. Die Konvertierung ist dieselbe, die Ihr Picker intern durchführen würde; dieses Tool blendet die Zwischenwerte für das Debugging ein.

Accessibility-Engineers passen die Helligkeit der Markenfarbe für Kontrast an

Wenn eine Markenfarbe den WCAG-Kontrast gegen einen Hintergrund nicht besteht, ist der günstige Fix, L zu erhöhen, bis das Verhältnis passt — ohne H oder S zu ändern, liest sich die Farbe weiterhin als dieselbe Markenidentität. Marken-HEX einfügen, die Kontrast-Badges beobachten, L mental anpassen (oder die L-Achse des Pickers verwenden), bis sowohl WCAG als auch APCA bestehen. Das HSL-Feld blendet den neuen L-Prozentwert für das Spezifikationsdokument ein; das HEX-Feld blendet den passenden Code für das Stylesheet ein.

HEX-zu-HSL-Mathematik & Parsing

HEX → RGB → HSL ist eine zweistufige Pipeline

Die Konvertierung läuft über RGB als Zwischenformat. Schritt eins: HEX über `parseInt(hex.slice(1, 3), 16)` je Kanal zu RGB-Ganzzahlen parsen. Schritt zwei: RGB auf 0–1 normalisieren, `max`/`min`/`delta` berechnen, die stückweise Trigonometrie aus CSS Color 4 §6.4 anwenden: `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = stückweise * 60`. Die zweistufige Struktur ist der Grund, weshalb das Tool auch das zwischenliegende RGB-Tupel einblendet — es kostet nichts und ist für das Debugging nützlich.

CSS Color 4 §6.4 definiert den Referenzalgorithmus

Die W3C-Spezifikation CSS Color 4 §6.4 (Algorithmus `rgb()` zu `hsl()`) definiert die kanonische stückweise Mathematik: Helligkeit als Mittelpunkt von max und min, Sättigung als `delta / (1 - |2L - 1|)` (mit S = 0, wenn delta = 0, um Division durch null bei Grautönen zu vermeiden), Farbton als 60-Grad-pro-Schritt-Trigonometrie nach Maximalkanal. Die Spezifikation behandelt auch Sonderfälle: reines Schwarz (`#000`) ergibt `hsl(0 0% 0%)` mit einem willkürlichen 0°-Farbton; reines Weiß (`#FFF`) ergibt analog `hsl(0 0% 100%)`; reines Grau ergibt `hsl(0 0% 50%)`.

Farbton wrappt bei 360°, S und L sind Prozentwerte

Die drei Achsen von HSL haben unterschiedliche Einheiten. Der Farbton ist ein Winkelgrad von 0 bis 360 mit Wraparound — `hsl(370 ...)` wird als `hsl(10 ...)` interpretiert, weil sich Winkelpositionen umwickeln. Sättigung und Helligkeit sind Prozentwerte von 0 % bis 100 %, ohne Wraparound; Werte außerhalb des Bereichs werden geclampt. CSS Color 4 akzeptiert den Farbton auch in Umdrehungen (`hsl(0.6turn ...)`) oder Radianten (`hsl(3.787rad ...)`); die Ausgabe des Tools verwendet Grad, weil das die häufigste Form in Designwerkzeug-UIs und Marken-Spezifikationsdokumenten ist.

Die HSL-Helligkeit ist NICHT perzeptuell uniform

Ein Grün bei `hsl(120 100% 50%)` wirkt sichtbar heller als ein Blau bei `hsl(240 100% 50%)`, obwohl beide dieselbe nominelle Helligkeit haben — weil HSL die Gamma-Eigenheiten von sRGB erbt und dieselbe L-Skala über alle Farbtöne verwendet. Das ist der Grund, weshalb HSL-basierte Tönungsstufenleitern ungleichmäßig wirken (das helle Ende der Grünstufen klettert schneller als das helle Ende der Blaustufen) und weshalb Designsysteme weitgehend auf OKLCH für die Stufenleiter-Erzeugung migriert sind. Das Tool blendet sowohl HSL als auch OKLCH ein, sodass die Wahl nur einen Blick entfernt liegt.

OKLCH als interne Source-of-Truth für Rundlaufstabilität

Auch wenn dieser Spoke gezielt HEX → HSL adressiert, hält der gemeinsame zugrundeliegende Konverter die kanonische Farbe intern als OKLCH-Tripel. HEX → HSL → RGB → OKLAB → HEX bleibt bit-stabil; Legacy-Konverter mit HSL als Pivot sammeln Rundungsfehler an und können den Farbton über wenige Konvertierungen um mehrere Grad driften lassen. Der OKLCH-Pivot bewahrt außerdem den Farbton als stabile Achse, sodass das Ziehen des Farbton-Schiebereglers nicht versehentlich durch Grau crossfaded. Nach Björn Ottossons OKLAB-Papier von 2020.

Kanal-Kodierung: 8 Bit ohne Vorzeichen, sRGB-gammacodiert

HEX-Codes kodieren 8-Bit-RGB-Kanäle ohne Vorzeichen (0–255) im sRGB-Farbraum-Modell, das IEC 61966-2-1 (1996) definiert. Die Werte sind *gammacodiert* — der Zusammenhang zwischen Kanalwert und wahrgenommener Helligkeit ist nicht-linear und folgt der stückweisen sRGB-Transferfunktion (etwa ein Exponent von 2,4 mit einem kleinen linearen Segment nahe null). HSL wird direkt aus diesen gammacodierten RGB-Werten ohne Linearisierungsschritt abgeleitet, was die eigentliche Ursache des perzeptuellen Uniformitätsproblems von HSL ist. OKLCH linearisiert zuerst und bildet dann auf einen perzeptuell uniformen Raum ab; HSL tut das nicht.

Best Practices für HEX-/HSL-Workflows

In neuem Code die moderne leerzeichengetrennte HSL-Syntax verwenden

Das `hsl(217 91% 60%)` (leerzeichengetrennt) und `hsl(217 91% 60% / 0.5)` (Slash für Alpha) aus CSS Color 4 sind ab 2025 die kanonischen Syntaxen. Die alten Komma-Formen `hsl(217, 91%, 60%)` und `hsla(217, 91%, 60%, 0.5)` werden überall weiter unterstützt, sind in CSS Color 4 stilistisch aber veraltet. Verwenden Sie die moderne Syntax in neuen Stylesheets; behalten Sie `hsla()` nur für IE-9-11-Fallback-Kontexte, in denen Sie wirklich Legacy-Unterstützung brauchen.

Stufenleitern in OKLCH erzeugen, nicht in HSL

Die Helligkeitsachse von HSL ist nicht perzeptuell uniform — ein 9-stufiger L-Sweep erzeugt eine Stufenleiter, in der die grünen Stufen bei jedem L-Wert heller wirken als die blauen Stufen. Für Stufenleitern, in denen jeder Schritt gleich hell aussehen soll (die Standardanforderung im Designsystem), erzeugen Sie stattdessen in OKLCH: `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)` usw. Das Tool blendet für denselben HEX sowohl HSL als auch OKLCH ein, sodass der Wechsel zwischen beiden nur einen Kopieren-Klick entfernt liegt.

Farbton und Sättigung fixieren, Helligkeit durchlaufen

Wenn Sie HSL für Tint-/Shade-Arbeit nutzen, ändern Sie nur die L-Zahl — halten Sie H und S über die Stufenleiter hinweg identisch. Farbton-Drift (auch nur um 5°) lässt eine Stufenleiter durcheinander wirken. Sättigungs-Drift lässt das helle Ende ausgewaschen und das dunkle Ende matschig aussehen. Die Disziplin „eine Achse pro Schritt“ ist genau das, was HSL seinen designer-freundlichen Ruf verleiht; sie aufzugeben, gibt Ihnen das Schlechteste aus beiden Welten.

HEX für Source-of-Truth-Tokens bevorzugen, HSL für berechnete Varianten

Wenn Sie eine Design-Token-Spezifikation schreiben, bevorzugen Sie HEX (oder OKLCH) als kanonische Form — sie sind knapper und passen sauber in JSON oder YAML. HSL ist nützlicher für *abgeleitete* Tokens zur Laufzeit (`hsl(from var(--primary) h s calc(l + 10%))`) als als Source-of-Truth-Format. Beide Formate beschreiben dieselbe Farbe; die Wahl hängt davon ab, welche Rolle der Token im System spielt.

HSL-Varianten mit dem Basis-HEX dokumentieren

Wenn Sie eine CSS-Variable wie `--primary-light: hsl(217 91% 70%)` ausliefern, fügen Sie einen Kommentar ein, der auf den Basis-HEX zurückverweist: `/* Basis: #3b82f6 → hsl(217 91% 60%), helle Variante +10 % L */`. Sechs Monate später, wenn jemand `--primary-lighter` ableiten will, braucht er die Basisfarbe zum Berechnen — und HSL allein blendet das nicht ein. HEX + HSL zusammen bewahren die volle Nachvollziehbarkeit.

URL-Hash zum Teilen von Live-Farbentscheidungen nutzen

Jede Farbänderung aktualisiert den URL-Hash automatisch als `#hex=3b82f6`. Kopieren Sie die URL in einen Slack-Thread oder ein GitHub-Issue, und wer sie öffnet, landet bei derselben Farbe mit demselben HSL-Tripel. Das ist zuverlässiger, als eine HSL-Zeichenkette in den Chat zu kopieren — Empfänger vertippen beim manuellen Eintippen des Werts schon mal das Grad oder lassen ein Prozentzeichen weg — und erlaubt es einem Design-Review-Thread, sich auf eine exakte Farbe zu beziehen statt auf „das Blau, das wir am Dienstag besprochen haben“. Der Hash wird nie an den Server übertragen.

Häufig gestellte Fragen