你如何得到#xxxxxx颜色的色调？

如何提取“#rrggbb”给出的颜色的色相分量？

Answer 1

如果您search如何将RGB转换为HSL，您会发现许多algorithm，包括由Sergey链接的维基百科文章。

首先，提取hex颜色表示法的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。

然后，您可以使用维基百科文章中的公式来计算色调，或者无耻地窃取别人的代码 ：

 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]; } 

（请参阅源文件页面和hslToRgb()函数。）

现在我们可以把这两个片段放在一起，获得色彩：

 var hue = rgbToHsl(r, g, b)[0] * 360; 

[0]是抓住色调 – 函数返回一个数组（ [h,s,l] ）。 我们乘以360，因为色调返回0和1之间的值; 我们想把它转换成度。

用#c7d92c的示例颜色， hue将是#c7d92c 。 Photoshop的颜色select器说这种颜色的色调是66°，所以看起来我们很好！

Answer 2

维基百科的文章有一个公式，看起来像可以很容易地实现的一些东西：

http://en.wikipedia.org/wiki/Hue#Computing_hue_from_RGB

编辑：这是一个使用这些公式的函数：

 function getHue(color) { var r = parseInt(color.substring(0,2),16)/255; var g = parseInt(color.substring(2,4),16)/255; var b = parseInt(color.substring(4,6),16)/255; var hue; if ((r >= g) && (g >= b)) { hue = 60*(gb)/(rb); } else if ((g > r) && (r >= b)) { hue = 60*(2 - (rb)/(gb)); } //... continue here return hue; } alert(getHue('FF0000')); // correctly returns 0 alert(getHue('408000')); // correctly returns 90 alert(getHue('0000FF')); // not implemented yet 

只要继续使用该维基百科文章中的表格中的其他angular度的公式。

Answer 3

 hue = Atan2(1.732050808 * (G - B), (2 * R - G - B)) * 57.295779513; 

http://en.wikipedia.org/wiki/Hue

色调= Atan2（sqr（3）*（G-B），2 * R-G-B）

结果将在极坐标中。 乘以180除以pi转换为angular度。

Answer 4

多年以来，我也在这个问题上磕磕绊绊，那就是我如何解决这个问题。

积分： hslpicker.com的 Brandon Mathis ，代码从这里被拿走

 function hexToRgb (color) { let hex = color[0] === '#' ? color.slice(1) : color; let c; // expand the short hex by doubling each character, fc0 -> ffcc00 if (hex.length !== 6) { hex = ((() => { const result = []; for (c of Array.from(hex)) { result.push(`${c}${c}`); } return result; })()).join(''); } const colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1); const rgb = colorStr.map(col => parseInt(col, 16)); rgb.push(1); return rgb; } function rgbToHsl (rgb) { const r = rgb[0] / 255; const g = rgb[1] / 255; const b = rgb[2] / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; const add = max + min; const hue = min === max ? 0 : r === max ? (((60 * (g - b)) / diff) + 360) % 360 : g === max ? ((60 * (b - r)) / diff) + 120 : ((60 * (r - g)) / diff) + 240; const lum = 0.5 * add; const sat = lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add); const h = Math.round(hue); const s = Math.round(sat * 100); const l = Math.round(lum * 100); const a = rgb[3] || 1; return [h, s, l, a]; } 

我已经为这两个函数写了一个小的包装来将hex颜色数组转换为描述H / S / L组件的string数组

 function hexToHsl (color) { const rgb = hexToRgb(color); const hsl = rgbToHsl(rgb); return `original: ${ color } - H: ${ hsl[0] } S: ${ hsl[1] } L: ${ hsl[2] }`; } 

用法：

 var colors = ['#51bce6','#6dcff6','#829CBD','#565a5c'] colors.map(color => hexToHsl(color)) => ["original: #51bce6 - H: 197 S: 75 L: 61", "original: #6dcff6 - H: 197 S: 88 L: 70", "original: #829CBD - H: 214 S: 31 L: 63", "original: #565a5c - H: 200 S: 3 L: 35"]