HSL-Zeichenkette nach RGB parsen
Lesen Sie eine eingefügte CSS-Farbe als Zahlen: hsl(210, 80%, 45%) wird zu Rot 23, Grün 115 und Blau 207 oder #1773cf, ob mit Kommas, Leerzeichen oder Einheiten wie deg und turn. 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
- Hsl
- hsl(210, 80%, 45%)
- H
- 210
- S
- 80
- L
- 45
- Widerstand (Ω)
- 23
Designer und Ingenieure fügen CSS-Literale hsl() und hsla() aus Stylesheets, Figma-Tokens und den DevTools des Browsers ein und brauchen danach ein stabiles Rot-Grün-Blau-Tripel für Canvas, native Apps und Bildpuffer. Dieser Parser nimmt eine einzelne CSS-Farbzeichenkette entgegen, toleriert zusätzliche Leerzeichen, optionale Farbtoneinheiten wie deg, turn, rad und grad sowie optionale Prozentzeichen an Sättigung und Helligkeit und wandelt den geparsten Farbton, die Sättigung und die Helligkeit anschließend über denselben Pfad des CSS Color Module um, den Browser beim Malen von hsl() nutzen. Der Farbton wickelt sich so, wie CSS Winkel wickelt; Sättigung und Helligkeit außerhalb von null bis einhundert Prozent werden abgelehnt, damit ein Tippfehler nicht still zu Weiß wird.
Wie eine CSS-hsl()-Zeichenkette zum RGB-Tripel wird
Eine CSS-Farbe hsl() benennt einen Punkt in Zylinderkoordinaten: der Farbton ist der Winkel um das Rad, die Sättigung ist, wie weit die Farbe vom Grau liegt, und die Helligkeit ist, wie nah sie an Schwarz oder Weiß sitzt. Sie akzeptiert die historische Kommaform hsl(h, s, l) und die moderne, durch Leerzeichen getrennte Form hsl(h s l), mit oder ohne das a in hsla, und mit optionalem Alpha nach einem vierten Komma oder nach einem Schrägstrich.
Der Farbton darf eine nackte Gradzahl sein oder eine ausdrückliche Einheit tragen: deg, turn, rad oder grad. Sättigung und Helligkeit dürfen das Prozentzeichen enthalten oder weglassen; beide werden als Prozentsätze von null bis einhundert gelesen. Ist das Token verstanden, folgt die Umwandlung dem CSS Color Module und dem W3C-hue2rgb-Pfad: Sättigung und Helligkeit werden auf das Einheitsintervall skaliert, Zwischengrenzen p und q berechnet, drei verschobene Positionen auf dem Einheitskreis abgetastet, mit zweihundertfünfundfünfzig multipliziert und auf Ganzzahlen gerundet.
Ist die Sättigung null, fallen die drei Kanäle auf dasselbe Grau zusammen. Die Pipeline ist reine Arithmetik ohne Uhren und ohne Netz, sodass dieselbe Zeichenkette stets dasselbe Tripel liefert.
Eingabevertrag, Einheiten, Abstand und Fehlerverhalten
Der Wert muss eine CSS-Funktion hsl() oder hsla() sein, einschließlich der Klammern; ein nacktes Zahlentripel wird abgelehnt, damit der Vertrag ein Zeichenkettenparser bleibt und nicht eine zweite numerische HSL-Form. Zusätzlicher Leerraum in den Klammern wird ignoriert. Sättigung und Helligkeit außerhalb von null bis einhundert Prozent scheitern ebenfalls statt zu klemmen, sodass ein Tippfehler wie fünfhundert Prozent nicht still zu Weiß werden kann.
Der Farbton wickelt sich nach der Einheitenumrechnung modulo dreihundertsechzig, passend zu CSS, sodass vierhundertachtzig Grad und einhundertzwanzig Grad dasselbe Grün malen. Bei Erfolg gibt der Körper die getrimmte Eingabezeichenkette zurück, die geparsten numerischen h, s und l (Farbton in Grad nach der Wicklung, Sättigung und Helligkeit als Prozentsätze), ganzzahlige Kanäle r, g und b, ein rgb-Array-Tripel, eine druckbare rgb()-Zeichenkette, einen Kleinbuchstaben-Hex-Code und eine kurze Formelnotiz. Enthielt die Quellzeichenkette eine Alpha-Komponente, enthält die Antwort außerdem a im Einheitsintervall und eine rgba()-Zeichenkette; fehlt Alpha, werden diese Schlüssel weggelassen statt auf null gesetzt.
Beispiel: hsl(210, 80%, 45%) liefert dieselben tiefblauen Kanäle, die ein numerischer HSL-Konverter für Farbton zweihundertzehn, Sättigung achtzig und Helligkeit fünfundvierzig zurückgäbe.
Wo das Parsen einer hsl()-Zeichenkette sich lohnt
Design-Token-Pipelines speichern Markenrampen als CSS-Funktionen, damit sie neben Stylesheets lesbar bleiben, und geben dann ganzzahlige Kanäle für iOS-UIColor, Android Color und E-Mail-Hex aus. Werkzeuge zur visuellen Regression vergleichen gerenderte Pixel; ein deterministisches Parsen derselben hsl()-Zeichenkette, die im CSS steht, ist der einzige Weg, das erwartete Acht-Bit-Tripel zu kennen, ohne einen Browser zu öffnen. Dokumentationsgeneratoren drucken eine Muster-Tabelle aus den Tokens eines Repositories und dürfen kein anderes Grün erfinden als das, das die Site ausliefert.
Lehrmaterial, das CSS-Farbfunktionen neben RGB und Hex zeigt, braucht ein Orakel, das fehlerhafte Syntax meldet, statt ein fehlendes Prozentzeichen durch Raten zu retten. Wenn Sie bereits drei Zahlen statt einer CSS-Zeichenkette haben, nutzen Sie einen numerischen HSL-zu-RGB-Konverter; diese Landing besitzt die Suchintention, eine hsl()-Zeichenkette in ein RGB-Tripel zu parsen.
Anwendungsfälle
Von Stylesheet-Tokens zu Canvas- und nativem RGB
Fügen Sie hsl()-Literale aus einer Theme-Datei oder den DevTools ein und erhalten Sie ganzzahlige r, g, b plus Hex für Canvas-Füllungen, UIColor und Android Color.
Design-Token- und Dokumentationspipelines
Durchlaufen Sie CSS-Funktionstokens in einem Design-System-Repository und geben Sie eine stabile RGB-Tripel-Tabelle aus, die zur hsl()-Malerei des Browsers passt.
Häufige Fragen
Welche CSS-hsl()-Formen akzeptiert der Parser?
Die Kommaform hsl(h, s, l) und die moderne Leerzeichenform hsl(h s l), plus hsla() und optionales Alpha (viertes Komma oder Schrägstrich). Extra-Leerzeichen werden ignoriert. Der Farbton darf deg, turn, rad oder grad nutzen.
Wie wird hsl() in ein RGB-Tripel umgewandelt?
Nach dem Parsen der Zeichenkette folgt die Umwandlung dem hue2rgb-Pfad des CSS Color Module auf dem Einheitskreis. Kanäle werden auf Ganzzahlen 0–255 gerundet. Dieselbe Zeichenkette liefert stets dieselben r, g und b.
Was geschieht, wenn die hsl()-Zeichenkette fehlerhaft ist?
Falsche Funktionsnamen, fehlende Klammern, die falsche Komponentenanzahl, gemischte Komma- und Schrägstrichsyntax sowie nichtnumerische Tokens werden abgelehnt und nicht berechnet.
Wickeln Farbtoneinheiten, und werden Sättigung und Helligkeit geklemmt?
Der Farbton wickelt nach der Einheitenumrechnung modulo 360, passend zu CSS. Sättigung und Helligkeit müssen zwischen 0 und 100 Prozent liegen; Werte außerhalb scheitern statt auf Weiß oder Schwarz geklemmt zu werden.
Kann ich eine Farbe direkt aus einem Stylesheet oder den DevTools einfügen?
Ja. Fügen Sie den ganzen Text hsl() oder hsla() samt Klammern ein, etwa hsl(210, 80%, 45%). Zusätzliche Leerzeichen werden ignoriert, drei lose Zahlen ohne hsl() aber abgelehnt.
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/hsl-string-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hsl":"hsl(210, 80%, 45%)"}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-string-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hsl": "hsl(210, 80%, 45%)"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-string-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hsl": "hsl(210, 80%, 45%)"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-string-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hsl":"hsl(210, 80%, 45%)"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hsl":"hsl(210, 80%, 45%)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-string-to-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"hsl": "hsl(210, 80%, 45%)"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_string_to_rgb",
"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
Fehlerhafte Syntax — fehlende Klammern, der falsche Funktionsname, zu wenige Komponenten oder nichtnumerische Tokens — scheitert mit invalid_input statt eine benachbarte Farbe zu raten.
Wie eine CSS-hsl()-Zeichenkette zum RGB-Tripel wird
Autoren schreiben diesen Punkt als Funktionstoken, nicht als drei getrennte Formularfelder, sodass ein Konverter, der nur numerische h, s und l akzeptiert, eine Lücke lässt, sobald die Quelle der Wahrheit ein Stylesheet, eine Design-Token-JSON-Datei oder eine DevTools-Kopie ist. Diese Fähigkeit parst zuerst das Funktionstoken.
Eingabevertrag, Einheiten, Abstand und Fehlerverhalten
Senden Sie per POST einen JSON-Körper mit einem einzigen Pflicht-Zeichenkettenfeld namens hsl. Die Aliase text, value, color und input werden akzeptiert und bedeuten dasselbe. Fehlendes hsl, eine leere Zeichenkette, eine Zeichenkette länger als zweihundertsechsundfünfzig Zeichen, ein anderer Funktionsname als hsl oder hsla, unausgeglichene Klammern, die falsche Komponentenanzahl, gemischte Komma- und Schrägstrichsyntax sowie Tokens, die keine endlichen Zahlen sind, scheitern mit invalid_input und werden nicht berechnet.
Wo das Parsen einer hsl()-Zeichenkette sich lohnt
Weil diese Fähigkeit eine reine Parse-Engine ist, ist das Browser-Werkzeug kostenlos und ein erfolgreicher API-Aufruf kostet den veröffentlichten $0.002 pro Element; Validierungsfehler verbrauchen kein Prepaid-Guthaben.
Integrationsbeispiele
Fixtures für visuelle Regression
Wandeln Sie dieselben hsl()-Zeichenketten, die Ihr CSS ausliefert, in 8-Bit-RGB-Fixtures, damit Screenshot-Tests gegen die Farbe vergleichen, die der Browser wirklich malt.
Technische Fragen
Was kostet das Parsen einer hsl()-Zeichenkette nach RGB?
Das Browser-Werkzeug ist kostenlos. API-Anfragen nutzen Prepaid-KIT-Guthaben zu $0.002 pro erfolgreichem Aufruf; ungültige Eingabe wird nicht berechnet.