HSL in CSS-String
Wandeln Sie getrennte Werte für Farbton, Sättigung und Helligkeit in einen sauberen CSS-hsl()-String um, ohne Satzzeichen manuell zusammenzusetzen, uneinheitlich zu runden oder Prozentzeichen zu vergessen.
Im Browser ausführen – kostenlos
Der Formatierer prüft jede Komponente, normalisiert den Farbton im Farbkreis, rundet mit der gewählten Genauigkeit und liefert ein vorhersehbares Ergebnis. Er eignet sich überall dort, wo strukturierte Farbdaten zu browserfertigem CSS werden sollen: von Design-Token-Pipelines und Theme-Generatoren bis zu automatisierten Tests, Vorlagen und kleinen Entwicklungswerkzeugen.
Geben Sie numerische HSL-Komponenten an
Übermitteln Sie Farbton, Sättigung und Helligkeit als JSON-Zahlen, nicht als teilweise formatierten CSS-Ausdruck. Der Farbton ist ein Winkel in Grad und darf positiv, negativ oder größer als eine volle Umdrehung sein. Der Formatierer bringt ihn in das kanonische Intervall von null bis unter 360: -30 entspricht 330, und 390 wird zu 30. Sättigung und Helligkeit sind Prozentwerte, werden jedoch ohne Prozentzeichen eingegeben; 65 bedeutet fünfundsechzig Prozent. Beide müssen zwischen 0 und 100 liegen. Alle Pflichtwerte müssen endliche Zahlen sein. Zeichenketten wie „50“, fehlende Felder, null, Infinity und NaN werden abgelehnt, damit Datenfehler sichtbar bleiben und API, Browser sowie Tests identische Ergebnisse erhalten.
Steuern Sie die deterministische Rundung
Mit precision bestimmen Sie die maximale Zahl der Dezimalstellen für alle drei Komponenten. Standardmäßig sind es zwei; zulässig sind ganze Zahlen von null bis sechs. Null erzeugt Ganzzahlen, höhere Werte bewahren mehr Details. Gerundet wird erst nach der Normalisierung des Farbtons. Überflüssige Endnullen entfallen, und negatives Null wird als Null ausgegeben. Die Regeln hängen nicht von Regionseinstellungen ab: Als Dezimaltrennzeichen dient stets ein Punkt, Argumente werden mit Komma und Leerzeichen getrennt, und Sättigung sowie Helligkeit erhalten immer Prozentzeichen. Deshalb erzeugt dieselbe gültige Eingabe in jeder Laufzeit exakt denselben String.
Verwenden Sie das Ergebnis sicher
Das Ergebnis enthält ein css-Feld in der Schreibweise hsl(h, s%, l%). Sie können es in einer Style-Deklaration, DOM-Eigenschaft, einem Design-Token oder Golden-Test einsetzen. Die Fähigkeit formatiert ausschließlich: Sie konvertiert weder RGB noch Hexadezimalwerte, ergänzt keine Alpha-Transparenz, berechnet keinen Kontrast und bewertet keine Lesbarkeit. Validieren Sie beim Erzeugen von Themes zunächst die Quelldaten und formatieren Sie jede Farbe einzeln. Gehört die Genauigkeit zu einer öffentlichen Konvention, geben Sie sie ausdrücklich an. Jede automatisierte Anfrage kostet $0.002. Setzen Sie den String nur an Stellen ein, die einen CSS-Farbwert erwarten.
Anwendungsfälle
Design-Tokens erzeugen
Wandeln Sie berechnete HSL-Datensätze in einheitliche CSS-Werte um, bevor Sie Theme-Variablen oder Token-Dateien schreiben.
Formularausgaben vereinheitlichen
Prüfen Sie Zahlen eines Farbwählers und erzeugen Sie einen stabilen String für Vorschau, Speicherung oder Styles.
Stabile Tests erstellen
Nutzen Sie feste Rundung und Abstände, damit Snapshots nicht durch unterschiedliche Zahlenformate wechseln.
Häufige Fragen
Was kostet eine Anfrage?
Der Grundpreis der API beträgt $0.002 pro Anfrage.
Enthält die Eingabe Prozentzeichen?
Nein. Senden Sie Zahlen von 0 bis 100; der Formatierer ergänzt die erforderlichen Zeichen.
Was geschieht mit einem Farbton außerhalb von 0 bis 360?
Er wird im Farbkreis auf das Intervall von 0 bis unter 360 zurückgeführt.
Wie viele Dezimalstellen kann ich behalten?
Setzen Sie precision auf eine ganze Zahl von 0 bis 6. Standard ist 2; Endnullen entfallen.
Wird Alpha-Transparenz unterstützt?
Nein. Das Ergebnis ist ein deckender hsl()-String aus drei Komponenten ohne Alpha-Wert.
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-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210.456,"saturation":64.444,"lightness":42.225}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210.456,"saturation":64.444,"lightness":42.225}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210.456,"saturation":64.444,"lightness":42.225}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_css",
"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. |