混合3种hsl颜色的计算(算法)

Question

我正在为3种颜色建立一个免费的真正的颜色混合器。为了感觉真实，我首先将十六进制或rgb转换为hsl，并使用h，s，l值进行计算。我想要混合两种颜色：

function hslMixer2c(hsl10,hsl11,hsl12,hsl20,hsl21,hsl22,amount1,amount2) { // read hsl10 as hsl1[0], 1st value from hsl string
    var amountTot = amount1 + amount2;
    if (Math.abs(hsl10 - hsl20) > 0.5) { hsl10 += 1; } // > 179.5 is shorter part from wheel to 359
    var h = (amount1 / amountTot) * hsl10 + (amount2 / amountTot) * hsl20;  
    var s = (amount1 / amountTot) * hsl11 + (amount2 / amountTot) * hsl21; 
    var l = (amount1 / amountTot) * hsl12 + (amount2 / amountTot) * hsl22; 
    if (h > 1) { h -= 1; } 

    return [h, s, l];
}

​

​

到目前为止，一切顺利..。

但是我想添加第三种颜色来混合。我尝试了几次计算，但当改变所用颜色的顺序时，结果不同。

function hslMixer3c(hsl10,hsl11,hsl12,hsl20,hsl21,hsl22,hsl30,hsl31,hsl32,amount1,amount2,amount3) { // read hsl10 as hsl1[0], 1st value from hsl string
    var amountTot = amount1 + amount2 + amount3;
    if (Math.abs(hsl10 - hsl20) > 0.5) { hsl10 += 1; } // > 179.5 is andere kant naar 359 korter)
    var hsl90 = (amount1 / amountTot) * hsl10 + (amount2 / amountTot) * hsl20;  // hsl9x is sub mix
    var hsl91 = (amount1 / amountTot) * hsl11 + (amount2 / amountTot) * hsl21; 
    var hsl92 = (amount1 / amountTot) * hsl12 + (amount2 / amountTot) * hsl22; 
    if (hsl90 > 1) { hsl90 -= 1; } 
    if (Math.abs(hsl90 - hsl30) > 0.5) { hsl90 += 1; } // > 179.5 is andere kant naar 359 korter)
    var h = hsl90 + (amount3 / amountTot) * hsl30;  
    var s = hsl91 + (amount3 / amountTot) * hsl31; 
    var l = hsl92 + (amount3 / amountTot) * hsl32; 
    if (h > 1) { h -= 1; } 

    return [h, s, l];
}

将颜色1设置为90，将颜色2设置为180，将颜色3设置为300。首先计算颜色1和颜色2，再将颜色3设置为190。但是当我将3和1作为第一个颜色时，颜色会移到轮子的上侧，加上颜色3，就会得到一个完全不同的结果。

有没有人可以帮我指出正确的方向，也许是用一个样本？

Answer 1

一种方法可能是将每个颜色色调角度转换为矢量格式：

  x = Math.cos(hue / 180 * Math.PI) * saturation
  y = Math.sin(hue / 180 * Math.PI) * saturation
  z = lightness

然后简单地将这些矢量相加(轴与轴)，并除以颜色的数量。

如果您希望某些颜色对最终颜色的贡献大于其他颜色，则可以在添加向量之前将每个向量乘以一个权重(其中所有权重的总和= 1)。

最后转换回色调和饱和度：

        h = Math.atan2(y, x) * 180 / Math.PI
        s = Math.sqrt(x * x + y * y)
        l = z