HWB to HSL converter
Hue 210 with 20 % whiteness and 10 % blackness becomes hsl(210 77.78% 55%), with the hue kept exactly as you entered it. Move HWB design colors into HSL without guessing. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hue
- 210
- Whiteness
- 20
- Blackness
- 10
- H
- 210
- S
- 77.7778
- L
- 55
- Saturation
- 77.7778
The HWB to HSL converter turns a hue angle plus whiteness and blackness percentages into hue, saturation, and lightness without relying on a browser color parser or an external service. It preserves the normalized hue angle, validates every component, and applies the standard HWB normalization rule when whiteness and blackness together exceed one hundred percent. The result includes numeric HSL fields, a nested object, and a ready-to-use CSS string.
Enter a complete HWB color and understand validation
Provide hue, whiteness, and blackness as finite numbers. Hue is measured in degrees and may be any finite positive or negative angle: the converter wraps it into the familiar range from zero inclusive to three hundred sixty exclusive, so minus thirty becomes three hundred thirty and four hundred twenty becomes sixty. Whiteness and blackness are percentages and must each remain between zero and one hundred inclusive.
Numeric strings are accepted when they contain only a valid decimal or exponent notation, which helps form-oriented clients without weakening validation. This strict boundary is useful in pipelines because bad upstream data stops at the conversion step and cannot masquerade as a plausible palette value.
How whiteness and blackness become HSL
HWB describes a color as a pure hue mixed with white and black. After converting both percentages to fractions, the converter checks their sum. If the total is at most one, the remaining fraction is chroma: one minus whiteness minus blackness.
HSL lightness is then one plus whiteness minus blackness, divided by two. Saturation is the chroma divided by one minus the absolute value of twice that lightness minus one, except at the black, white, or achromatic boundaries where saturation is zero. If whiteness plus blackness exceeds one hundred percent, CSS color rules normalize both proportions by their sum.
Crucially, the returned hue still preserves the wrapped input angle even when saturation is zero. That choice keeps round trips, palette metadata, and deterministic comparisons stable, although the visible gray has no perceptible hue. All published numeric results are rounded to four decimal places to prevent floating-point noise in snapshots.
What you can do with it
Migrate CSS color tokens
Convert HWB design tokens into numeric HSL components and a CSS-ready string while retaining the original hue and mixture values for review.
Normalize generated palettes
Handle programmatically generated whiteness and blackness totals above one hundred percent with explicit effective values instead of browser-dependent surprises.
FAQ
What units does the converter accept?
Hue is a degree angle. Whiteness and blackness are percentages from 0 to 100 inclusive, not fractions from 0 to 1.
What happens when whiteness plus blackness exceeds 100%?
Both values are proportionally normalized by their sum, following HWB color rules. The output is achromatic, normalized is true, and the effective percentages are returned.
Is hue preserved for a gray result?
Yes. The input hue is wrapped into 0–360 and returned even when saturation is zero, preserving color metadata deterministically.
Can I use h, w, and b field names?
The long canonical names take precedence if both forms are supplied.
How do I convert hue 210 with 20 % whiteness and 10 % blackness to HSL?
The result is hsl(210 77.78% 55%). What remains after taking away whiteness and blackness is the pure color, and lightness is one plus whiteness minus blackness, divided by two: 55 %.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your 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)Example request
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
The browser tool is free, while automated API conversion costs $0.002 per successful item.
Enter a complete HWB color and understand validation
Their short aliases h, w, and b are also accepted for clients that already store compact HWB records. Missing values, nonnumeric text, infinities, and out-of-range percentages produce an invalid_input response instead of being guessed or silently clamped.
How whiteness and blackness become HSL
No chromatic component remains, so the result is a shade of gray; effective_whiteness and effective_blackness show the normalized mixture and normalized is true.
Use the output in CSS, design systems, and automated tests
A successful response exposes h, s, and l, with hue in degrees and saturation and lightness in percentages. Because the implementation consists only of bounded arithmetic, identical input always produces identical output: there is no network request, random value, system clock, locale-dependent parser, or hidden color-management profile. This converter intentionally handles HWB to HSL only. It also provides the long names hue, saturation, and lightness, a nested hsl object, and hsl_css for direct use in a stylesheet or custom property. The original whiteness and blackness percentages remain visible, while effective_whiteness and effective_blackness distinguish an over-specified HWB mixture that required normalization. A broader multi-format converter is more suitable when one request must discover arbitrary HEX, RGB, LAB, or CMYK input, but this focused endpoint gives HWB workflows precise validation and transparent normalization semantics.
Integration use cases
Create stable color fixtures
Use rounded deterministic HSL output in unit tests, teaching tools, and cross-language conformance checks for HWB conversion logic.
Technical questions
How much does the API conversion cost?
Each successful API item costs $0.002. The browser runner is free, and validation failures are returned as invalid_input.