Javascript - 对 rgb 值进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11923659/
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
Javascript - Sort rgb values
提问by Andrew Deniszczyc
Using javascript/jquery, I want to sort an array of rgba values to the colours of the visible spectrum. By doing this, like shades should be bunched together. Is there a plugin to do this or how would I go about doing it?
使用 javascript/jquery，我想将 rgba 值数组排序为可见光谱的颜色。通过这样做，像阴影应该聚集在一起。有没有插件可以做到这一点，或者我将如何去做？
Spectrum image: http://www.gamonline.com/catalog/colortheory/images/spectrum.gif
光谱图像：http: //www.gamonline.com/catalog/colortheory/images/spectrum.gif
回答by Ben
Disclosure: I'm the author of the library recommended below.
披露：我是下面推荐的图书馆的作者。
If you don't mind using a library, here's a much more concise version of Oriol's detailed response. It uses the sc-color library:
如果您不介意使用库，这里是 Oriol 详细回复的更简洁版本。它使用sc-color 库：
var sorted = colorArray.sort(function(colorA, colorB) {
return sc_color(colorA).hue() - sc_color(colorB).hue();
});
回答by Oriol
If your array of colors is like this:
如果您的颜色数组是这样的：
var rgbArr = [c1, c2, c3, ...]
where each color ciis an array of three numbers between 0 and 255
其中每种颜色ci是一个由 0 到 255 之间的三个数字组成的数组
ci = [red, green, blue]
then, you can use this function to convert the colors to HSL
然后，您可以使用此功能将颜色转换为 HSL
function rgbToHsl(c) {
var r = c[0]/255, g = c[1]/255, b = c[2]/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 new Array(h * 360, s * 100, l * 100);
}
and sort them by hue
并按色调对它们进行排序
var sortedRgbArr = rgbArr.map(function(c, i) {
// Convert to HSL and keep track of original indices
return {color: rgbToHsl(c), index: i};
}).sort(function(c1, c2) {
// Sort by hue
return c1.color[0] - c2.color[0];
}).map(function(data) {
// Retrieve original RGB color
return rgbArr[data.index];
});
Here is a runnable example (thanks Ionic? Biz?u):
这是一个可运行的示例（感谢Ionic？Biz?u）：
function display(container, arr) {
container = document.querySelector(container);
arr.forEach(function(c) {
var el = document.createElement("div");
el.style.backgroundColor = "rgb(" + c.join(", ") + ")";
container.appendChild(el);
})
}
function rgbToHsl(c) {
var r = c[0] / 255,
g = c[1] / 255,
b = c[2] / 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 new Array(h * 360, s * 100, l * 100);
}
var rgbArr = [];
for (var i = 0; i < 100; ++i) {
rgbArr.push([
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256)
]);
}
display("#before", rgbArr);
var sortedRgbArr = rgbArr.map(function(c, i) {
// Convert to HSL and keep track of original indices
return {color: rgbToHsl(c), index: i};
}).sort(function(c1, c2) {
// Sort by hue
return c1.color[0] - c2.color[0];
}).map(function(data) {
// Retrieve original RGB color
return rgbArr[data.index];
});
display("#after", sortedRgbArr);#before > div,
#after > div {
width: 1%;
height: 20px;
display: inline-block;
}Random colors: <div id="before"></div>
Same colors, sorted by hue: <div id="after"></div>sortedRgbArrwill contain the rgb colors of rgbArrsorted more or less like the colors of the visible spectrum.
sortedRgbArr将包含rgbArr或多或少像可见光谱的颜色一样排序的 rgb 颜色。
The problem is that the HSL spectrum looks like this:
问题是 HSL 频谱看起来像这样：
Your spectrum is weird because it doesn't have all colors, such as pink.
你的光谱很奇怪，因为它没有所有的颜色，比如粉红色。
I guess that's because pink doesn't exist in the nature, it's a combination of the colors of the opposite extremes of light's spectrum. But we have it in rgb, so you have to decide where do you want it.
我想那是因为自然界中不存在粉红色，它是光谱相反极端颜色的组合。但是我们在 rgb 中有它，所以你必须决定你想要它的位置。
Moreover, it seems that your spectrum goes from lower to higher wavelength, not frequency. But then your spectrum is a reverse of HSL's spectrum.
此外，您的光谱似乎从较低的波长到较高的波长，而不是频率。但是，您的频谱与 HSL 的频谱相反。
Replace c1.color[0] - c2.color[0]with c2.color[0] - c1.color[0]if you want it like your spectrum.
如果您希望它像您的频谱一样，请替换c1.color[0] - c2.color[0]为c2.color[0] - c1.color[0]。
回答by Dmitry
Another sample.
另一个样本。
Sort RGB by HUE
按 HUE 对 RGB 进行排序
Original from
原件来自
http://www.runtime-era.com/2011/11/grouping-html-hex-colors-by-hue-in.html
