HWB-zu-HSL-Konverter
Farbton 210 mit 20 % Weiß- und 10 % Schwarzanteil ergibt hsl(210 77.78% 55%), wobei der Farbton genau so bleibt, wie Sie ihn eingegeben haben. Übertragen Sie HWB-Designfarben ohne Raten nach HSL. Gratis in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Hue
- 210
- Weißanteil
- 20
- Schwarzanteil
- 10
- H
- 210
- S
- 77,7778
- L
- 55
- Sättigung
- 77,7778
Der HWB-zu-HSL-Konverter wandelt einen Farbtonwinkel sowie Weiß- und Schwarzanteile in Farbton, Sättigung und Helligkeit um, ohne einen Browser-Farbparser oder externen Dienst zu verwenden. Er bewahrt den normalisierten Farbtonwinkel, prüft jede Komponente und wendet die übliche HWB-Normalisierung an, wenn Weiß- und Schwarzanteil zusammen einhundert Prozent überschreiten. Das Ergebnis enthält numerische HSL-Felder, ein verschachteltes Objekt und eine sofort nutzbare CSS-Zeichenfolge.
Geben Sie eine vollständige HWB-Farbe ein und verstehen Sie die Prüfung
Der Farbton wird in Grad gemessen und darf jeder endliche positive oder negative Winkel sein: Der Konverter führt ihn in den üblichen Bereich von einschließlich null bis ausschließlich dreihundertsechzig zurück; minus dreißig wird somit zu dreihundertdreißig und vierhundertzwanzig zu sechzig. Weiß- und Schwarzanteil sind Prozentwerte und müssen jeweils einschließlich zwischen null und einhundert liegen. Die kurzen Aliasse h, w und b werden ebenfalls für Clients akzeptiert, die bereits kompakte HWB-Datensätze speichern.
Numerische Zeichenfolgen werden angenommen, wenn sie ausschließlich gültige Dezimal- oder Exponentialschreibweise enthalten. Das unterstützt formularbasierte Clients, ohne die Prüfung abzuschwächen. Diese strenge Grenze ist in Pipelines nützlich, weil fehlerhafte Quelldaten bei der Konvertierung stoppen und nicht als scheinbar plausible Palettenwerte weiterlaufen.
So werden Weiß- und Schwarzanteil in HSL umgerechnet
HWB beschreibt eine Farbe als reinen Farbton, der mit Weiß und Schwarz gemischt wird. Nach der Umrechnung beider Prozentwerte in Bruchteile prüft der Konverter ihre Summe. Ist die Summe höchstens eins, ist der verbleibende Anteil die Chroma: eins minus Weißanteil minus Schwarzanteil.
Die HSL-Helligkeit ist eins plus Weißanteil minus Schwarzanteil, geteilt durch zwei. Die Sättigung entspricht der Chroma geteilt durch eins minus den Absolutwert aus zweimal dieser Helligkeit minus eins; an schwarzen, weißen oder achromatischen Grenzen ist sie null. Überschreitet die Summe einhundert Prozent, normalisieren die CSS-Farbregeln beide Anteile durch ihre Summe.
Der zurückgegebene Farbton bewahrt dennoch den angepassten Eingabewinkel, auch wenn die Sättigung null beträgt. Dadurch bleiben Rückumwandlungen, Palettenmetadaten und deterministische Vergleiche stabil, obwohl das sichtbare Grau keinen wahrnehmbaren Farbton besitzt. Alle veröffentlichten Zahlen werden auf vier Dezimalstellen gerundet, damit Gleitkommaartefakte keine Snapshots stören.
Nutzen Sie die Ausgabe in CSS, Designsystemen und automatisierten Tests
Eine erfolgreiche Antwort liefert h, s und l, wobei der Farbton in Grad und Sättigung sowie Helligkeit in Prozent angegeben werden. Verwenden Sie die kostenlose Browserausführung für einzelne Palettenarbeiten, Dokumentationsbeispiele und Unterrichtskontrollen. Da die Implementierung ausschließlich begrenzte Arithmetik verwendet, erzeugt dieselbe Eingabe stets dieselbe Ausgabe: Netzwerk, Zufall, Systemuhr, regionsabhängige Parser oder verborgene Farbprofile spielen keine Rolle.
Dieser Konverter verarbeitet ausschließlich HWB nach HSL. Für beliebige HEX-, RGB-, LAB- oder CMYK-Eingaben eignet sich ein allgemeiner Mehrformatkonverter besser; dieser gezielte Endpunkt bietet HWB-Abläufen hingegen genaue Prüfung und transparente Normalisierung.
Anwendungsfälle
Migrieren Sie CSS-Farbtoken
Wandeln Sie HWB-Designtoken in numerische HSL-Komponenten und eine CSS-Zeichenfolge um und bewahren Sie Farbton und Ausgangsmischung zur Prüfung.
Normalisieren Sie erzeugte Paletten
Verarbeiten Sie programmatisch erzeugte Weiß- und Schwarzanteile über einhundert Prozent mit sichtbaren Effektivwerten ohne browserabhängige Überraschungen.
Häufige Fragen
Welche Einheiten akzeptiert der Konverter?
Der Farbton ist ein Winkel in Grad. Weiß- und Schwarzanteil sind Prozentwerte von einschließlich 0 bis 100, keine Bruchteile von 0 bis 1.
Was geschieht, wenn Weiß- plus Schwarzanteil 100 % übersteigt?
Beide Werte werden gemäß den HWB-Regeln proportional durch ihre Summe normalisiert. Die Ausgabe ist achromatisch, normalized ist true und die effektiven Prozente werden ausgegeben.
Bleibt der Farbton bei einem grauen Ergebnis erhalten?
Ja. Der Eingabefarbton wird in den Bereich 0–360 geführt und auch bei Sättigung null ausgegeben, damit die Metadaten deterministisch erhalten bleiben.
Können Sie die Felder h, w und b verwenden?
Wenn beide Formen vorliegen, haben die langen kanonischen Namen Vorrang.
Wie rechne ich Farbton 210 mit 20 % Weiß- und 10 % Schwarzanteil in HSL um?
Das Ergebnis ist hsl(210 77.78% 55%). Was nach Abzug von Weiß- und Schwarzanteil bleibt, ist die reine Farbe; die Helligkeit ist eins plus Weißanteil minus Schwarzanteil, geteilt durch zwei: 55 %.
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/hwb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"whiteness":20,"blackness":10}'const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"whiteness": 20,
"blackness": 10
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hwb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"whiteness": 20,
"blackness": 10
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"whiteness":20,"blackness":10}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-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
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_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
Das Browserwerkzeug ist kostenlos; automatisierte Konvertierungen über die API kosten $0.002 je erfolgreichem Element.
Geben Sie eine vollständige HWB-Farbe ein und verstehen Sie die Prüfung
Geben Sie hue, whiteness und blackness als endliche Zahlen an. Fehlende Werte, nichtnumerischer Text, Unendlichkeiten und Prozentwerte außerhalb des Bereichs erzeugen invalid_input, statt Werte zu erraten oder still zu begrenzen.
So werden Weiß- und Schwarzanteil in HSL umgerechnet
Es bleibt keine chromatische Komponente und das Ergebnis ist grau; effective_whiteness und effective_blackness zeigen die normalisierte Mischung, normalized ist true.
Nutzen Sie die Ausgabe in CSS, Designsystemen und automatisierten Tests
Zusätzlich enthält sie die langen Namen hue, saturation und lightness, ein verschachteltes hsl-Objekt sowie hsl_css zur direkten Verwendung in einem Stylesheet oder einer benutzerdefinierten Eigenschaft. Die ursprünglichen Weiß- und Schwarzanteile bleiben sichtbar; effective_whiteness und effective_blackness kennzeichnen eine überspezifizierte HWB-Mischung, die normalisiert werden musste. Nutzen Sie die API für $0.002 je erfolgreichem Element, wenn ein Token-Compiler, Themengenerator, Migrationsskript oder eine Continuous-Integration-Aufgabe denselben stabilen JSON-Vertrag benötigt.
Integrationsbeispiele
Erstellen Sie stabile Farb-Fixtures
Verwenden Sie gerundete deterministische HSL-Ausgaben in Unit-Tests, Lernwerkzeugen und sprachübergreifenden Konformitätsprüfungen.
Technische Fragen
Was kostet die Konvertierung über die API?
Jedes erfolgreiche API-Element kostet $0.002. Die Browserausführung ist kostenlos; Validierungsfehler werden als invalid_input zurückgegeben.