我认为这是最精确的：

function hsv_to_hsl(h, s, v) {
    // both hsv and hsl values are in [0, 1]
    var l = (2 - s) * v / 2;

    if (l != 0) {
        if (l == 1) {
            s = 0;
        } else if (l < 0.5) {
            s = s * v / (l * 2);
        } else {
            s = s * v / (2 - l * 2);
        }
    }

    return [h, s, l];
}

简短但精确

试试这个（s，v，l in [0，1]，more：hsv2rgbrgb2hsv和hsl2rgbrgb2hsl）

let hsl2hsv = (h,s,l,v=s*Math.min(l,1-l)+l) => [h, v?2-2*l/v:0, v];

let hsv2hsl = (h,s,v,l=v-v*s/2, m=Math.min(l,1-l)) => [h,m?(v-l)/m:0,l];

let hsv2hsl = (h,s,v,l=v-v*s/2,m=Math.min(l,1-l)) => [h,m?(v-l)/m:0,l];
let hsl2hsv = (h,s,l,v=s*Math.min(l,1-l)+l) => [h, v?2-2*l/v:0, v];

console.log("hsv:["+ hsl2hsv(30,1,0.6) +"] hsl:["+ hsv2hsl(30,0.8,1) +"]");

// -------------------
// UI code
// -------------------

let $ = x => document.querySelector(x);
let c = (x,s) => $(x).style.backgroundColor=s;
let hsl=[0,1,0.5];
let hsv=hsl2hsv(...hsl);

let refreshHSV =(i,e) => {
   hsv[i]= e.target.value/(i?100:1);
   hsl=hsv2hsl(...hsv);
   refreshView();
}

let refreshHSL =(i,e) => {
   hsl[i]= e.target.value/(i?100:1);
   hsv=hsl2hsv(...hsl);  
   refreshView();
}

let hsv2rgb = (h,s,v) => {                              
  let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);     
  return [f(5),f(3),f(1)];       
}

let refreshView = () => {
   let a= [hsl[0], (hsl[1]*100).toFixed(2), (hsl[2]*100).toFixed(2)]; 
   let b= [hsv[0], (hsv[1]*100).toFixed(2), (hsv[2]*100).toFixed(2)]; 
   
   let r= hsv2rgb(...hsv).map(x=>x*255|0);
   let ta= `hsl(${a[0]},${a[1]}%,${a[2]}%)`
   let tb= `hsv(${b[0]},${b[1]}%,${b[2]}%)`
   let tr= `rgb(${r[0]},${r[1]},${r[2]})`
   
   c('.hsl', tr);   
   $('#sv').value=hsv[1]*100;
   $('#v').value =hsv[2]*100;
   $('#sl').value=hsl[1]*100;
   $('#l').value =hsl[2]*100;
   $('.info').innerHTML=`${tr}\n${tb}\n${ta.padEnd(25)}`;   
}


refreshView();

.box {
  width: 50px;
  height: 50px;
  margin: 20px;
}

body {
    display: flex;
    background: white;
}

<div>
<input id="h" type="range" min="0" max="360" value="0" oninput="refreshHSV(0,event)">Hue<br>
<div class="box hsl"></div>
<pre class="info"></pre>
</div> 

<div>
<input id="sv" type="range" min="0" max="100" value="0" oninput="refreshHSV(1,event)">HSV Saturation<br>
<input id="v" type="range" min="0" max="100" value="100" oninput="refreshHSV(2,event)">HSV Value<br><br><br>
<input id="sl" type="range" min="0" max="100" value="0" oninput="refreshHSL(1,event)">HSL Saturation<br>
<input id="l" type="range" min="0" max="100" value="100" oninput="refreshHSL(2,event)">HSL Lightness<br>
</div>

这段代码基于我在维基上发现和编写的公式

斯蒂芬·莫利似乎已经把它钉死了here。
具体而言：

/* Calculates and stores the HSL components of this HSVColour so that they can
 * be returned be the getHSL function.
 */
function calculateHSL(){
  // determine the lightness in the range [0,100]
  var l = (2 - hsv.s / 100) * hsv.v / 2;

  // store the HSL components
  hsl =
    {
      'h' : hsv.h,
      's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
      'l' : l
    };

  // correct a division-by-zero error
  if (isNaN(hsl.s)) hsl.s = 0;
}

他使用[0-360]表示色调，使用[0-100]表示其他值。

首先，您的操作顺序将导致：

b - s / 2 =
50 - 100 / 2 =
50 - 50 = 0

因为除法运算符的优先级比减法运算符高。如果您期望的是25，则需要执行(b - s) / 2。
但是我不确定这个结果是否是你想要的，因为B（V）和L的定义都是基于RGB颜色空间的，你至少需要一种方法来恢复 M 和 m 的值来计算转换。
有关详细信息，请参阅Wikipedia文章。

Wikipedia不再显示Kamil Kiełczewski显示的公式。它们现在看起来像这样：

const hsvToHsl = (h, s, v, l = v * (1 - (s / 2))) => [h, l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l), l];
const hslToHsv = (h, s, l, v = l + s * Math.min(l, 1 - l)) => [h, v === 0 ? 0 : 2 * (1 - (l / v)), v];

您可以尝试使用Tinycolor库。要从HSV转换为HSL，您可以这样做
tinycolor("hsv(34, 56%, 100%)").toHslString()
你应该得到这样的结果：“hsl（34，100%，72%）”

我得到了错误的结果与功能在其他答案.现在得到这些似乎工作得很好：

function hsb_to_hsl(h, s, b) {
    const x = (200 - s) * b / 100;
    return {
        h,
        s: x === 0 || x === 200 ? 0 : Math.round(s * b / (x <= 100 ? x : 200 - x)),
        l: Math.round(x / 2)
    };
}

function hsl_to_hsb(h, s, l) {
    const x = s * (l < 50 ? l : 100 - l);
    const b = l + (x / 100);
    return {
        h,
        s: l === 0 ? s : 2 * x / b,
        b
    };
}

不同颜色空间之间有很多转换公式：http://www.easyrgb.com/?X=MATH

恐怕我的Javascript知识不足，但您应该能够从http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html推断出转换