得到给定x，y和色调的HSL值

Question

给出一个看起来像这样的颜色选择器：

​

​

我试图计算HSL值，给定光标的x和y位置加上右边滑块的色调。我的数学能力很弱，虽然我的能力很差，但是想要抓住一种真正明亮的全强度颜色是很麻烦的，(结果是太灰色了)。这是我使用的当前函数：

getHSL = function(h, x, y) {
  var hsl, hue, lightness, saturation;
  hue = parseInt(h, 10);
  if (hue === 360) {
    hue = 0;
  }
  saturation = x;
  lightness = (50 * (1 - (x / 100)) + 50) * (1 - (y / 100));
  hue = Math.round(clamp(hue, 0, 360));
  saturation = Math.round(clamp(saturation, 0, 100));
  lightness = Math.round(clamp(lightness, 0, 100));
  hsl = {
    hue: hue,
    saturation: saturation,
    lightness: lightness
  };
  return hsl;
};

这样做不对吗？结果实际上是非常接近正确的，但有点淡淡，真正轻的全强度的颜色。

Answer 1

看起来您的颜色选择器是用HSV (Hue/饱和/值)坐标表示的。

维基百科在这方面有一篇不错的文章，你可以从那里给出的信息中找出转换公式。

或者，在Google上快速搜索返回，例如，这个页面有一个公式，您可以使用该公式将HSV转换为HSL：http://codeitdown.com/hsl-hsb-hsv-color/。假设您的x和y都运行在0到100之间，则计算如下：

hsv_value = 1 - (y / 100);
hsv_saturation = x / 100;
lightness = (hsv_value / 2) * (2 - hsv_saturation);
saturation = (hsv_value * hsv_saturation) / (1 - Math.abs(2 * lightness - 1));

这将在0,1范围内返回saturation和lightness。此外，为什么要对x和y坐标进行clamp？