Hex-zu-HSL-Konverter
Machen Sie aus einem Hexcode Werte, die sich nach Augenmaß anpassen lassen: #FF8040 entspricht Farbton 20,1°, Sättigung 100 % und Helligkeit 62,55 %, direkt einfügbar als hsl(20.1 100% 62.55%). Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Hexadez
- #FF8040
- Hex-Ziffern
- FF8040
- Widerstand (Ω)
- 255
- G
- 128
- B
- 64
Designer, Front-End-Entwickler und Markensysteme speichern Farben oft als Hex-Codes wie #FF8040 oder die Kurzform #f80, benötigen aber Farbton, Sättigung und Helligkeit, um den Ton ohne Helligkeitsdrift anzupassen, CSS-Variablen zu bauen oder farbbewusste Design-Tokens zu speisen. Dieser Hex-zu-HSL-Konverter akzeptiert einen drei- oder sechsstelligen hexadezimalen Farbcode mit oder ohne führende Raute, expandiert Kurzformen wie CSS, führt eine deterministische sRGB-artige Umwandlung aus und liefert Farbton in Grad sowie Sättigung und Helligkeit als Prozentsätze, zusammen mit modernen und klassischen CSS-hsl-Zeichenketten zum Einfügen in Stylesheets. Ungültige Hex-Codes—falsche Länge, Nicht-Hex-Zeichen oder fehlendes Feld—scheitern mit einem klaren Fehler für ungültige Eingabe, damit schlechte Daten nie zu einem stillen Clamp werden.
Hex-Code eingeben und was die Umwandlung berechnet
Geben Sie ein Zeichenkettenfeld namens hex mit einem drei- oder sechsstelligen hexadezimalen Farbcode an. Eine führende Raute ist optional, daher sind #FF8040 und FF8040 akzeptiert, ebenso Kurzformen wie #f80 und f80. Die Groß-/Kleinschreibung wird ignoriert: Klein-, Groß- und gemischte Ziffern normalisieren zum selben Ergebnis.
Dreistellige Codes expandieren durch Verdopplung jeder Ziffer—f80 wird FF8800—entsprechend der CSS-Farbkurzschreibregel der Browser. Nach der Expansion parst die Engine zwei Hex-Ziffern pro Kanal zu Rot-, Grün- und Blau-Ganzzahlen von null bis 255 und normalisiert jeden Kanal durch Division durch 255, sodass Werte im Einheitsintervall liegen. Sie findet Maximum und Minimum dieser drei normalisierten Komponenten und das Chroma als deren Differenz.
Die Helligkeit ist die Hälfte der Summe aus Maximum und Minimum. Bei Chroma null ist die Farbe achromatisch: Farbton null und Sättigung null, nur die Helligkeit beschreibt Grau von Schwarz über Mittelgrau bis Weiß. Bei positivem Chroma ist die Sättigung das Chroma geteilt durch eins minus dem Absolutwert von zweimal Helligkeit minus eins—die Standard-HSL-Sättigungsformel in CSS und Grafik-Stacks.
Der Farbton wird aus dem Sektor des Farbkreises gebaut, in dem der maximale Kanal sitzt: rot-, grün- oder blaudominant, skaliert auf Grad im halb-offenen Bereich von null bis 360.
Anwendungsfälle
CSS- und Design-Tokens aus Marken-Hex-Farben
Wandeln Sie Hex-Muster aus Designwerkzeugen in HSL um, damit Themes Farbton oder Helligkeit anpassen und Sättigungsrichtlinien in Hell- und Dunkelmodus konsistent halten.
Paletten- und Marken-Pipelines
Automatisierung, die von Marken-Hex-Farben startet, leitet HSL-Komponenten ab, um Tönungen, Schatten und Akzentvarianten zu erzeugen, ohne fehlerhafte Codes still zu akzeptieren.
Häufige Fragen
Wie wandle ich eine Hex-Farbe mit diesem Werkzeug in HSL um?
B. hex: "#FF8040" oder hex: "f80"). Die Antwort enthält h, s, l, RGB-Kanäle, CSS-Strings und ein verschachteltes hsl-Objekt.
Was passiert bei ungültigem Hex-Code?
Nur 3 oder 6 hexadezimale Ziffern werden akzeptiert (optionale führende #). Falsche Länge oder Nicht-Hex-Zeichen werden abgelehnt und nicht berechnet.
Sind Farbton, Sättigung und Helligkeit Prozentsätze oder Brüche 0–1?
Der Farbton ist in Grad von 0 bis 360. Sättigung und Helligkeit sind Prozentsätze von 0 bis 100, passend zur gängigen CSS-Nutzung von hsl().
Kann ich kurze dreistellige Hex-Codes nutzen?
Ja. Codes wie #f80 expandieren zu #FF8800 durch Verdopplung jeder Ziffer gemäß CSS-Kurzschreibregeln und werden dann nach HSL umgewandelt.
Was ergibt ein Grau wie #808080?
Alle drei Kanäle sind gleich, daher sind Sättigung und Farbton 0. Die Farbe wird dann allein durch die Helligkeit beschrieben, von Schwarz über mittleres Grau bis Weiß.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/color/hex-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#FF8040"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#FF8040"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#FF8040"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#FF8040"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#FF8040"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"hex": "#FF8040"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Hex-Code eingeben und was die Umwandlung berechnet
Die Aliasse color, colour, value und hex_code mappen auf dasselbe Feld, wenn Clients diese Namen bevorzugen. Identische Eingaben erzeugen stets identisches JSON, weil der Pfad reine Arithmetik ohne Netz, ohne Zufallsseed und ohne Wanduhr ist.
Farbton, Sättigung, Helligkeit, RGB-Echo und CSS-Strings lesen
Anschließend stellt sie h, s und l für Farbton in Grad, Sättigung in Prozent und Helligkeit in Prozent bereit. Reines Rot #FF0000 ergibt Farbton null mit voller Sättigung und mittlerer Helligkeit; reines Grün #00FF00 und reines Blau #0000FF landen nahe 120 bzw. 240 Grad; gleiche Kanäle wie #808080 erzeugen Grau mit Sättigung null. Bei Erfolg enthält die Antwort die normalisierte Hex-Zeichenkette mit führender Raute und sechs Großbuchstaben-Ziffern, das Feld hex_digits ohne Raute sowie die expandierten Kanäle r, g und b zum Prüfen des Parses oder zur Verkettung in nur-RGB-Werkzeuge. Dieselben drei Zahlen erscheinen erneut unter den langen Namen hue, saturation und lightness sowie verschachtelt in einem hsl-Objekt, sodass UI-Code, SDK-Demos und Bewerter die passende Form ohne Extra-Mapping wählen können. Zwei einfügebereite Zeichenketten sind enthalten: hsl_css nutzt die moderne leerzeichengetrennte CSS-Color-Module-Form wie hsl(20.1 100% 62.55%), und hsl_legacy nutzt die klassische Kommaform mit Klammern, die ältere Parser noch erwarten. Das Feld method ist stets hex_to_hsl, damit nachgelagerte Router ohne Form-Sniffing verzweigen können. Fehlendes Hex, leere Zeichenketten, Nicht-Hex-Zeichen und Längen außer drei oder sechs Ziffern scheitern mit invalid_input und werden nach Ablehnung durch die Engine nicht berechnet.
API-Nutzung, Preise, Design-Workflows und praktische Grenzen
Nutzen Sie den kostenlosen Hex-zu-HSL-Konverter im Browser für Paletten-Anpassungen, Vorlesungsdemos und schnelle Checks ohne Farbbibliothek. Bevorzugen Sie diesen Endpunkt, wenn Suchintention und Produkt-Framing speziell Hex zu HSL mit strikter Code-Validierung sind; für RGB-Kanal-Tripel nutzen Sie den dedizierten RGB-zu-HSL-Konverter, und für Multi-Format-Umwandlung zwischen HEX, RGB, HSL, LAB und CMYK in einem Aufruf den breiteren Farbkonverter im Katalog. Kombinieren Sie HSL-Ausgaben mit Kontrastprüfern beim Bau barrierefreier Themes, oder speisen Sie Farbtonverschiebungen in Marken-Token-Pipelines, die die Helligkeit fix halten und Akzentfarben aus einem Hex-Markenmuster rotieren. Senden Sie einen JSON-Körper mit der erforderlichen Zeichenkette hex auf einen drei- oder sechsstelligen Farbcode gesetzt. Nutzen Sie die vorausbezahlte API, wenn ein Designsystem, Theme-Generator, Accessibility-Pipeline oder E-Commerce-Farbwerkzeug einen stabilen Vertrag unter KIT-Guthaben zu $0.002 pro erfolgreichem Element braucht; Validierungsfehler verbrauchen nach Ablehnung durch die Engine nie Guthaben. Autoren von SDK können h, s und l direkt in Formularsteuerelemente oder CSS-Custom-Properties mappen, ohne Hex-Parsing und Umwandlung in jeder Sprache neu zu implementieren.
Integrationsbeispiele
Lehre und Bewertung der Farbmathematik
Kurse und Coding-Assessments prüfen Hex→HSL-Antworten von Studierenden gegen deterministisches JSON, mit klarem invalid_input bei fehlerhaftem Hex-Code.
Technische Fragen
Ist der Hex-zu-HSL-Konverter kostenlos?
Das Browser-Werkzeug läuft kostenlos auf Ihrem Gerät. API-Aufrufe nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Element; Validierungsfehler werden nicht berechnet.