给定一个看起来像这样的颜色选择器：
我正在尝试根据光标的 x 和 y 位置以及右侧滑块的色调来计算 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;
};
这是错误的做法吗？结果实际上非常接近正确，但与真正的浅色全强度颜色有点偏差。
看起来您的颜色选择器是用 HSV（色相/饱和度/值）坐标表示的。
维基百科对此有一篇不错的文章，您可以根据那里给出的信息计算出转换公式。
或者，在 Google 上快速搜索会返回，例如，此页面包含可用于将 HSV 转换为 HSL 的公式：http://codeitdown.com/hsl-hsb-hsv-color/ http://codeitdown.com/hsl-hsb-hsv-color/。假设你的x and 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));
这返回saturation and lightness在[0,1]范围内。还有，你为什么clamp荷兰国际集团你的x and y坐标？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
