js颜色值按深浅排序 支持rgb/hex/hsl
根据颜色深浅排序
需求
最近参照组件库的设计，获取常用的组件颜色，比如这样的一系列灰色值
#fafafc
#f8f8f8
#f5f5f5
#efefef
#e0e0e0
#d9d9d9
#cccccc
#cbcbcb
#bfbfbf
然后要给它们由浅到深排个序，便于使用时知道加深程度，有个对比。
解决方案
将获取到的颜色统一转化为rgb格式，用公式r*0.299 + g*0.587 + b*0.114计算得到每一个颜色的灰度值，从小到大进行由浅到深的排序。
其中还要解决颜色的转化，以支持识别各类颜色。
代码
转换十六进制色值为rgb格式
function hextoRgb(color) {
color = color.slice(1);
var rgb = "";
for (var i = 0; i < color.length; i += 2) {
var end = i + 2;
rgb += parseInt(color.slice(i, end), 16).toString() + ",";
}
rgb = rgb.slice(0, rgb.length - 1);
rgb = "rgb(" + rgb + ")";
return rgb;
}
hsl格式 转rgb
function getMid(str) {
var left = str.indexOf("(") + 1;
var right = str.indexOf(")");
return str.slice(left, right);
}
// hsl格式 转rgb
function hslToRgb(color) {
var arr = getMid(color).split(",");
var r, g, b;
var h = toNum(arr[0] / 360 + ""),
s = toNum(arr[1]),
light = toNum(arr[2]); // h(色相) s(饱和度) l(亮度)
var temp2, temp1;
if (s == 0) {
r = g = b = light;
} else {
temp2 = light < 0.5 ? light * (1 + s) : light + s - light * s;
temp1 = 2 * light - temp2;
var h2rgb = function (p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
r = h2rgb(temp1, temp2, h + 1 / 3);
g = h2rgb(temp1, temp2, h);
b = h2rgb(temp1, temp2, h - 1 / 3);
}
return (
"rgb(" +
Math.round(r * 255) +
"," +
Math.round(g * 255) +
"," +
Math.round(b * 255) +
")"
);
}
function toNum(str) {
var rex = /[0-9]+/g;
if (str.indexOf("%") > 0) {
return str.match(rex)[0] / 100;
} else {
if (typeof +str === "number") {
return +str;
}
}
}
获取颜色灰色值
function grayLevel(color) {
color = isRgb(color)
? color
: isHex(color)
? hextoRgb(color)
: hslToRgb(color);
var arr = getMid(color).split(",");
var r = arr[0],
g = arr[1],
b = arr[2];
return r * 0.299 + g * 0.587 + b * 0.114;
}
各类颜色判断
// 是否为rgb颜色值
function isRgb(color) {
return /^rgb/.test(color);
}
// 是否为十六进制颜色值
function isHex(color) {
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
}
// 是否为hsl颜色值
function isHsl(color) {
return /^hsl/.test(color);
}
工具
小编直接做了一个颜色转换工具，方便直接使用
总结
主要代码也是参照网上大神来做的，小编觉得还有很多优化空间，包括各类颜色的转换，颜色的处理，颜色json的处理等。
