给出HSL值，给定x，y和hue

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（色相/饱和度/值）坐标表示。

维基百科有一篇不错的文章，您可以根据那里提供的信息计算转换公式。

或者，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。另外，为什么你clamp x和y坐标？