HSV to HSL converter
Move a color from HSV to HSL without guessing: hue 210, saturation 70% and value 80% become lightness 52% on the same hue, with saturation recalculated for HSL. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- H
- 210
- S
- 70
- Voltage (V)
- 80
- S in
- 70
- S
- 58.3333333333
- L
- 52
HSV and HSL are two cylindrical color models that share the same hue angle on the wheel but store brightness and vividness on different axes. Game engines, video tools, and many native pickers speak HSV, where value is maximum channel brightness, while CSS custom properties, design systems, and accessibility ramps often prefer HSL because lightness moves symmetrically toward black and white. This HSV to HSL converter accepts hue in degrees from zero through three hundred sixty, saturation as a percentage, and value as a percentage from zero through one hundred, then remaps saturation and value to HSL saturation and lightness while copying hue unchanged.
How HSV maps to HSL on the same hue
Hue is shared by both models: zero degrees is pure red, one hundred twenty is pure green, two hundred forty is pure blue, and three hundred sixty closes the circle back at red. The models diverge on how vividness and brightness are stored. In HSV, value is the maximum of the underlying RGB channels on a unit scale, so one hundred percent value is the brightest color of that hue and saturation, and zero percent value is always black regardless of saturation.
HSV saturation stretches a gray of that value toward the fully chromatic color at the chosen hue. In HSL, lightness runs from black at zero percent through a pure mid-tone near fifty percent up to white at one hundred percent, and HSL saturation stretches a gray of that lightness toward full chroma. Because the geometries differ, the numeric saturation in HSV is not the same number as the numeric saturation in HSL for most colors even when the perceived color matches after conversion.
The closed-form path used here works on the unit interval: lightness equals value times one minus half the HSV saturation, and HSL saturation is zero at black or white otherwise the gap between value and lightness divided by the minimum of lightness and one minus lightness. Hue is copied unchanged. Hue must lie in the closed interval from zero to three hundred sixty; saturation and value must each lie between zero and one hundred percent inclusive.
Where HSV to HSL conversion shows up in real work
Native mobile themes, Unity and Unreal material pickers, and many graphics libraries expose value-based brightness controls, yet design systems often document brand ramps in HSL so product teams can step lightness for accessible contrast while keeping hue and a perceptual saturation band stable. Data visualization and generative art tools that store artist swatches as HSV need a reliable path when exporting tokens as HSL custom properties for the web. Video and broadcast pipelines that document colors in HSV for camera grading still need HSL when feeding CSS and design documentation.
Curriculum and bootcamp lessons teach cylindrical models side by side and need a single trusted oracle for homework keys that match textbook identities. Accessibility workflows that receive HSV from an image editor and then adjust perceived lightness in HSL still need exact channel mapping without browser-only APIs. If you later need the reverse HSL to HSV path, HSV to RGB, multi-format HEX LAB CMYK conversion, or WCAG contrast checks, treat those as separate search intents and landings rather than overloading this dedicated HSV to HSL converter page.
What you can do with it
Engine swatches into CSS HSL tokens
Convert artist HSV triples from game engines and native pickers into HSL for design systems, CSS custom properties, and documentation tables.
Mobile themes and design handoff
Map value-based brand colors from mobile theme editors into HSL ramps that product teams can lighten for accessible contrast.
FAQ
What ranges do hue, saturation, and value accept?
Hue h must be between 0 and 360 degrees inclusive. Saturation s and value v are percentages from 0 to 100.
Does hue change when converting HSV to HSL?
No. Hue is shared by both models and is copied unchanged. Only saturation and the value-to-lightness axis are recomputed.
Is HSV saturation the same number as HSL saturation?
No. The models define saturation differently. This converter applies the closed-form identity so the resulting color matches while the numeric S values generally differ.
What happens at black or full white?
When value is zero, lightness is zero and HSL saturation is zero (black). Near pure white or black lightness extremes, HSL saturation collapses to zero by the unit-interval formula.
What does the HSV to HSL converter cost?
The browser tool is free and runs locally.
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/hsv-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"h":210,"s":70,"v":80}'const res = await fetch("https://api.kit.forhosting.com/color/hsv-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"h": 210,
"s": 70,
"v": 80
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsv-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"h": 210,
"s": 70,
"v": 80
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsv-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"h":210,"s":70,"v":80}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"h":210,"s":70,"v":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsv-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
{
"h": 210,
"s": 70,
"v": 80
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsv_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
Channels outside the legal ranges fail with a clear invalid_input error so bad tokens never silently wrap or clamp without notice.
How HSV maps to HSL on the same hue
The pipeline is pure floating-point arithmetic with no random seeds, no wall-clock timestamps, and no network calls, so identical inputs always produce identical JSON.
What you send and what you get back
Send three finite numbers: hue h in degrees from zero through three hundred sixty, HSV saturation s as a percentage from zero through one hundred, and value v as a percentage in the same band. Classic checks include pure mid red in HSV as hue zero, saturation one hundred, value one hundred mapping to HSL lightness fifty with full saturation; black as zero value collapsing to achromatic black with zero lightness; and grays with zero saturation mapping to zero HSL saturation with lightness equal to half the source value. Wire the free browser form for palette exploration and design reviews, then call the identical contract from scripts when you need bulk conversion of engine materials or mobile theme tokens into CSS HSL. Each field may arrive as a JSON number or as a numeric string; aliases hue, saturation, value, and brightness are accepted for convenience. Missing fields, non-numeric strings, NaN, Infinity, and out-of-range channels fail with invalid_input and are not charged. On success the response echoes cleaned h, source saturation as s_in, input value v, output HSL saturation s and lightness l, nested hsv and hsl objects with the full triples, and a short formula note restating the unit-interval identity. Pricing for successful API calls is the published base of $0.002 per item; validation failures do not consume prepaid balance.
Where HSV to HSL conversion shows up in real work
Because this capability is a pure parse engine, API pricing is the published base of $0.002 per successful item and failed validation does not consume balance.
Integration use cases
Bulk fixtures and curriculum keys
Script deterministic HSV to HSL conversion for regression fixtures, homework oracles, and palette exports at $0.002 per item.