HSL to CSS string formatter
Get a browser-ready hsl() value without hand-typed commas or percent signs: hue 210.456, saturation 64.444 and lightness 42.225 become hsl(210.46, 64.44%, 42.23%) at the default two decimals. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hue
- 210.456
- Saturation
- 64.444
- Lightness
- 42.225
- Css
- hsl(210.46, 64.44%, 42.23%)
Turn separate hue, saturation, and lightness numbers into a clean CSS hsl() value without hand-built punctuation, inconsistent rounding, or forgotten percentage signs. The formatter validates every component, normalizes the hue around the color circle, rounds values to a chosen precision, and returns one predictable string. It is useful anywhere structured color data must become browser-ready CSS, from design-token pipelines and theme generators to automated tests, templates, and small developer utilities.
Supply numeric HSL components
Hue represents an angle in degrees and may be positive, negative, or greater than one full turn. The formatter wraps it into the canonical interval beginning at zero and ending just before 360, so -30 becomes the same color angle as 330 and 390 becomes 30. Saturation and lightness represent percentages, but their inputs do not include percent signs: use 65 for sixty-five percent.
Both must remain between 0 and 100 inclusive because values beyond those limits do not describe a valid percentage component for this contract. Every required value must be a finite number. Strings such as "50", missing fields, null, Infinity, and NaN are rejected instead of being silently coerced.
Control deterministic rounding
Use precision to select the maximum number of decimal places retained for all three components. It defaults to two and accepts integers from zero through six. A precision of zero produces whole components, while higher values preserve more detail when a color came from calculation or conversion.
Rounding happens only after hue normalization, which prevents a negative or multi-turn hue from leaking into the formatted result. The formatter removes unnecessary trailing zeroes, so a value rounded to 42.50 is written as 42. It also canonicalizes negative zero as plain zero, avoiding surprising strings such as -0% after rounding a very small value.
These rules are deliberately fixed rather than locale-aware: decimal points always use a period, argument separators are always commas followed by spaces, and saturation and lightness always receive percent signs. Consequently, the same valid input and precision always return byte-for-byte identical CSS regardless of regional settings or runtime environment.
Use the returned CSS safely
The result contains a css field whose value follows the familiar hsl(h, s%, l%) functional notation. The capability formats a color; it does not convert RGB or hexadecimal input, apply alpha transparency, calculate contrast, or decide whether a color is suitable for text. Keeping that scope narrow makes validation and output easy to reason about.
When generating many theme values, validate upstream records and call the formatter once per color so each failure points to a specific item. If precision is part of a public design-token convention, pass it explicitly rather than relying on the default. Treat the returned string as generated data and place it only where a CSS color value is expected, rather than interpolating it into unrelated markup or selectors.
What you can do with it
Generate design tokens
Convert calculated HSL records into consistently formatted CSS values before writing theme variables or token files.
Normalize form output
Validate color-picker component numbers and produce a predictable string for previews, storage, or style properties.
FAQ
Do saturation and lightness include percent signs in the input?
No. Send numeric values from 0 to 100; the formatter appends the required percent signs.
What happens to a hue outside 0 to 360?
It is wrapped around the color circle into the range from 0 up to, but not including, 360.
How many decimal places can I keep?
Set precision to an integer from 0 through 6. The default is 2, and trailing zeroes are removed.
Does this formatter support alpha transparency?
No. It produces an opaque three-component hsl() string and does not accept an alpha component.
Does the result change with my language or region settings?
No. The rules are fixed and do not follow regional settings, so the decimal mark is always a dot and the same numbers always give hsl(210.46, 64.44%, 42.23%), valid in any browser.
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/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)Example request
{
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_css",
"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
Supply numeric HSL components
Provide hue, saturation, and lightness as JSON numbers, not as a partly formatted CSS expression.
Use the returned CSS safely
For API automation, each request is priced at $0.002; the same pure algorithm can also power the browser experience.
Integration use cases
Create stable test fixtures
Apply fixed rounding and spacing so snapshots do not change because separate callers format equivalent numbers differently.
Technical questions
What does one request cost?
The API base price is $0.002 per request.