[英]Javascript - Sort rgb values
使用javascript / jquery,我想将rgba值数组排序为可见光谱的颜色。 通过这样做,像阴影应该聚集在一起。 是否有插件可以执行此操作或我将如何执行此操作?
频谱图片: http : //www.gamonline.com/catalog/colortheory/images/spectrum.gif
披露 :我是下面推荐的图书馆的作者。
如果您不介意使用库,这里是Oriol详细响应的更简洁版本。 它使用sc-color库 :
var sorted = colorArray.sort(function(colorA, colorB) {
return sc_color(colorA).hue() - sc_color(colorB).hue();
});
如果你的颜色数组是这样的:
var rgbArr = [c1, c2, c3, ...]
其中每个颜色ci
是0到255之间的三个数字的数组
ci = [red, green, blue]
然后,您可以使用此功能将颜色转换为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);
}
并按色调对它们进行排序
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];
});
这是一个可运行的例子(感谢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>
sortedRgbArr
将包含的RGB颜色rgbArr
排序或多或少是可见光谱的颜色。
问题是HSL频谱看起来像这样:
你的光谱很奇怪,因为它没有所有的颜色,比如粉红色。
我猜这是因为粉红色在自然界中不存在,它是光谱相反极端的颜色的组合。 但我们在rgb中有它,所以你必须决定你想要它在哪里。
此外,您的频谱似乎从较低波长到较高波长,而不是频率。 但是,你的频谱与HSL频谱相反。
用c1.color[0] - c2.color[0]
替换c2.color[0] - c1.color[0]
如果你想要它的频谱。
另一个样本。
按HUE排序RGB
原来来自
http://www.runtime-era.com/2011/11/grouping-html-hex-colors-by-hue-in.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.