如何提取指定为“ #rrggbb”的颜色的色相成分?
如果您搜索如何将RGB转换为HSL,则会发现许多算法,包括Sergey链接的Wikipedia文章。
首先,提取十六进制颜色表示法的RGB分量。
var color='#c7d92c'; // A nice shade of green. var r = parseInt(color.substr(1,2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10). var g = parseInt(color.substr(3,2), 16); var b = parseInt(color.substr(5,2), 16);
这将使您获得颜色的字节(0-255)表示形式。在这种情况下为199、217、44。
然后,您可以使用Wikipedia文章中的公式来计算色相,或无耻地窃取他人的代码:
function rgbToHsl(r, g, b){ r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if(max == min){ h = s = 0; // achromatic }else{ var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l]; }
现在,我们可以将这两个代码片段放在一起并获得色相:
var hue = rgbToHsl(r, g, b)[0] * 360;
的[0]是抓住色相-该函数返回一个数组([h,s,l])。由于色相的返回值介于0和1之间,因此我们乘以360。我们想将其转换为度。
[0]
[h,s,l]
随着的例子色彩#c7d92c,hue将是〜66.24。Photoshop的颜色选择器表示该颜色的色相为66°,因此看起来我们不错!
#c7d92c
hue