核心:var grayLevel = r0.299 + g0.587 + b*0.114; 根据当前颜色的灰度判断颜色深浅。
步骤一: 转换色值为rgb格式
hex2rgb: hex格式是16进制,转换为rgb其实就是16进制转换为10进制,较为简单。
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格式似乎前端不怎么用的样子, 格式 :hsl(208, 0.36, 0.39)
基本步骤:
h: hue(色相) 在带有色相角度的值域里[0, 360]中对应的色相角度。
s: Saturation (饱和度)
l: Lightness (亮度)- 转换h,s,light为[0-1]中的值。
- if (s == 0) ==> r,g,b = light; 表明此时颜色是非彩色,或灰色的;
- 否则, 根据light判断, temp2 = light < 0.5 ? light * (1ight + s) : light + s - light * s;
- temp1 = 2 * light - temp2;
- 获取r,g, b
r = h + 1/3;
g = h;
b = h - 1/3; - 对rgb进行判断;
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; } } }
步骤二: 获取颜色灰色值:
之前已经将颜色转换为rgb,通过核心公式获取颜色灰度值,从而进行判断。
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
}
步骤三: 排序
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);