我正在创建一个颜色选择器工具,对于HSL滑块,我需要能够将RGB转换为HSL。当我在SO上搜索如何进行转换时,我发现了这个问题HSL到RGB颜色转换。
虽然它提供了一个函数来执行从RGB到HSL的转换,但我并没有看到任何关于计算过程究竟是怎么样的解释。为了更好地理解它,我阅读了维基百科上的HSL和HSV。
后来,我使用“HSL和HSV”页面中的计算方式重写了“HSL到RGB颜色转换”的函数。
如果R是最大值,我卡在色相的计算上。请参见“HSL和HSV”页面上的计算:
这是来自另一个荷兰语的维基页面:
这是来自“HSL到RGB颜色转换”的答案:
case r: h = (g - b) / d + (g < b ? 6 : 0); break; // d = max-min = c
我已经用一些RGB值测试了这三个选项,它们似乎产生类似的(如果不是完全一样的)结果。我的疑问是它们是否执行相同的操作?对于某些特定的RGB值,我会得到不同的结果吗?我应该使用哪一个?
hue = (g - b) / c; // dutch wiki
hue = ((g - b) / c) % 6; // eng wiki
hue = (g - b) / c + (g < b ? 6 : 0); // SO answer
function rgb2hsl(r, g, b) {
// see https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
// convert r,g,b [0,255] range to [0,1]
r = r / 255,
g = g / 255,
b = b / 255;
// get the min and max of r,g,b
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
// lightness is the average of the largest and smallest color components
var lum = (max + min) / 2;
var hue;
var sat;
if (max == min) { // no saturation
hue = 0;
sat = 0;
} else {
var c = max - min; // chroma
// saturation is simply the chroma scaled to fill
// the interval [0, 1] for every combination of hue and lightness
sat = c / (1 - Math.abs(2 * lum - 1));
switch(max) {
case r:
// hue = (g - b) / c;
// hue = ((g - b) / c) % 6;
// hue = (g - b) / c + (g < b ? 6 : 0);
break;
case g:
hue = (b - r) / c + 2;
break;
case b:
hue = (r - g) / c + 4;
break;
}
}
hue = Math.round(hue * 60); // °
sat = Math.round(sat * 100); // %
lum = Math.round(lum * 100); // %
return [hue, sat, lum];
}