Core: var = R & lt grayLevel 0.299 G + 0.587 + 0.114 * B; the color depth is determined according to the gradation of the current color.
Step a: format converting rgb color value
hex2rgb: hex hexadecimal format is converted to hexadecimal rgb is actually converted to decimal, it is relatively simple.
function hex2rgb(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; }
hel2rgb: hel distal format seems like do not use the format: HSL (208, 0.36, 0.39)
The basic steps:
H: Hue (hue) in the range with a hue angle in [0, 360] corresponding hue angle.
s: Saturation (saturation)
L: Lightness (brightness)- Conversion h, s, light is a value [0-1] in.
- if (s == 0) ==> r, g, b = light; indicating that it is achromatic color, or gray;
- Otherwise, according to the judgment light, temp2 = light <0.5 light * (1ight + s):? Light + s - light * s;
- temp1 = 2 * light - temp2;
- Get R & lt, G, B
R & lt + H = 1/3;
G = H;
B = H - 1/3; - Rgb of judgment;
function getMid(str) { var left = str.indexOf('(')+1; var right = str.indexOf(')'); return str.slice(left, right); } function hel2rgb(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; } } }
Step Two: Get Color Gray values:
It has previously been converted color rgb, color gradation values acquired through the core formula, thereby performing judgment.
function isRgb(color) {
return /^rgb/.test(color)
}
function isHex(color) {
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)
}
function isHsl(color) {
return /^hsl/.test(color);
}
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
}
Step three: Sort
function sortColor(colors) {
return colors.sort(function(a, b){
return grayLevel(b) - grayLevel(a)
})
}
//调用
var color = ['rgb(255,153,153)', 'rgb(246,162,144)', 'rgb(236,172,134)', 'rgb(227,181,125)', 'rgb(218,190,116)', 'rgb(209,199,107)', 'rgb(199,209,97)', 'rgb(190,218,88)', 'rgb(181,227,79)', 'rgb(172,236,70)', 'rgb(162,246,60)']
var result = sortColor(color)
var div = ''
for(; i < color.length ; i++) {
div += '<div style="width: 100px; height: 50px; background: '+result[i]+'">'+result[i]+'</div>'
}
$('.main').append(div);