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.
HSL
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.