javascript - 获取 HSL 值，给定 x、y 和色调

Question

给定一个看起来像这样的颜色选择器:

我正在尝试根据光标的 x 和 y 位置加上右侧 slider 的色调来计算 HSL 值。我的数学能力很弱，虽然我有很接近，但试图捕获一个非常浅的全强度颜色很麻烦，(它最终变得太灰)。这是我正在使用的当前功能:

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 坐标？