Tools / Color Converter / HSV → HSL
HSV to HSL Converter.
HSV to HSL keeps the hue but re-bases the other two axes: a color picker speaks HSV (saturation × value), while CSS and design tokens speak HSL (saturation × lightness). The hue is identical; only saturation and the light axis are recomputed.
Not a recognizable HSV color.
All formats
The HSV → HSL formula
L = V·(1 − S/2). S_hsl = 0 if L∈{0,1} else (V − L)/min(L, 1−L). Hue is unchanged.
Worked example
Convert hsv(220, 65%, 31%):
- V = 0.31, S = 0.65
- L = 0.31·(1 − 0.325) ≈ 0.21 → 21%
- S_hsl = (0.31 − 0.21)/min(0.21, 0.79) ≈ 0.49 → 49%
- Result: hsl(220, 49%, 21%)
JavaScript
function hsvToHsl(h,s,v){
s/=100; v/=100;
const l = v*(1 - s/2);
const sl = (l===0||l===1) ? 0 : (v - l)/Math.min(l, 1-l);
return [h, Math.round(sl*100), Math.round(l*100)];
}FAQ
Why does the same color have different S in HSV vs HSL?
The two models measure saturation against different references (value vs lightness). A vivid mid-tone can read as 100% S in HSV but ~50% S in HSL — same color, different yardstick.
Paid links below. As an Amazon Associate we earn from qualifying purchases.
Library
Colour references for your next project
Compare the original references behind this archive. Check the contents, edition and format before choosing a book.
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.
Torn between the two Wada dictionaries? Vol 1 vs Vol 2, compared plate by plate →
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.