javascript 你如何获得#xxxxxx 颜色的色调？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3732046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you get the hue of a #xxxxxx colour?
提问by Qubei
How do you extract the hue component of a color given as '#rrggbb'?
如何提取给定为“#rrggbb”的颜色的色调分量？
回答by josh3736
If you searchfor how to convert RGB to HSL, you'll find a number of algorithms, including in the Wikipedia article linked by Sergey.
如果您搜索如何将 RGB 转换为 HSL，您会找到许多算法，包括在Sergey链接的维基百科文章中。
First, extract the RGB components of the hex color notation.
首先，提取十六进制颜色表示法的 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);
That'll get you the byte (0-255) representation of your color. In this case, 199, 217, 44.
这将为您提供颜色的字节（0-255）表示。在本例中，为 199、217、44。
You can then use the formulae from the Wikipedia article to calculate hue, or shamelessly steal someone else's code:
然后你可以使用维基百科文章中的公式来计算色调，或者无耻地窃取别人的代码：
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];
}
(See the source pagefor documentation and a hslToRgb()function.)
（有关文档和功能，请参阅源页面hslToRgb()。）
We can now put those two snippets together and get the hue:
我们现在可以将这两个片段放在一起并获得色调：
var hue = rgbToHsl(r, g, b)[0] * 360;
The [0]is to grab the hue – the function returns an array ([h,s,l]). We multiply by 360 since hue is returned as a value between 0 and 1; we want to convert it to degrees.
的[0]是抓住色相-该函数返回一个数组（[h,s,l]）。我们乘以 360，因为色调返回为 0 到 1 之间的值；我们想把它转换成度数。
With the example color of #c7d92c, huewill be ~66.24. Photoshop's color picker says the hue of that color is 66° so it looks like we're good!
使用 的示例颜色#c7d92c，hue将是 ~66.24。Photoshop 的颜色选择器说该颜色的色调是 66°，所以看起来我们很好！
回答by Sergey
The wikipedia article has a formula which looks like something that can easily be implemented:
维基百科文章有一个公式，看起来很容易实现：
http://en.wikipedia.org/wiki/Hue#Computing_hue_from_RGB
http://en.wikipedia.org/wiki/Hue#Computing_hue_from_RGB
Edit: here's a function which uses those formulas:
编辑：这是一个使用这些公式的函数：
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*(g-b)/(r-b);
} else if ((g > r) && (r >= b)) {
hue = 60*(2 - (r-b)/(g-b));
}
//... continue here
return hue;
}
alert(getHue('FF0000')); // correctly returns 0
alert(getHue('408000')); // correctly returns 90
alert(getHue('0000FF')); // not implemented yet
Just continue using the formulas from the table in that wikipedia article for other angles.
只需继续使用该维基百科文章中表格中的公式用于其他角度。
回答by john ktejik
hue = Atan2(1.732050808 * (G - B), (2 * R - G - B)) * 57.295779513;
http://en.wikipedia.org/wiki/Hue
http://en.wikipedia.org/wiki/Hue
hue = Atan2(sqr(3) * (G - B), 2 * R - G - B)
色调 = Atan2(sqr(3) * (G - B), 2 * R - G - B)
The result will be in polar coordinates. Multiply by 180 and divide by pi to convert to angle.
结果将在极坐标中。乘以 180 并除以 pi 转换为角度。
回答by Valerio
I have stumbled on this issue as well after years, that's how I have worked around it.
多年后我也偶然发现了这个问题，这就是我解决它的方式。
Credits: Brandon Mathisof hslpicker.com, code was taken from here
积分：布兰登马西斯的hslpicker.com，代码是取自这里
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];
}
I have written a small wrapper around those 2 functions to convert array of hex colors to arrays of strings describing H / S / L components
我围绕这两个函数编写了一个小包装器，将十六进制颜色数组转换为描述 H/S/L 组件的字符串数组
function hexToHsl (color) {
const rgb = hexToRgb(color);
const hsl = rgbToHsl(rgb);
return `original: ${ color } - H: ${ hsl[0] } S: ${ hsl[1] } L: ${ hsl[2] }`;
}
Usage:
用法：
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"]
回答by ADJenks
There are well written libraries available on npm now, for example:
现在 npm 上有写得很好的库，例如：
https://www.npmjs.com/package/color-convert
https://www.npmjs.com/package/color-convert
Thankfully it uses an MIT License, like most libraries on npm.
幸运的是，它使用了 MIT 许可证，就像 npm 上的大多数库一样。
Using that library, you want to go from hex to HSL* or HSV* and take the first value:
使用该库，您想从十六进制转为 HSL* 或 HSV* 并取第一个值：
var convert = require('color-convert');
let hue = convert.hex.hsv('DEADBF')[0];
Before using require(), you have to install npm, and run npm install --save color-convertin your project folder. I believe you can also just drop the library in a script tag in the browser.
在使用 require() 之前，您必须安装 npm，并npm install --save color-convert在您的项目文件夹中运行。我相信您也可以将库放在浏览器的脚本标签中。
*HSL: hue, saturation, lightness. HSV: hue, saturation, value.
*HSL：色调、饱和度、亮度。HSV：色调、饱和度、值。
