核心:var graylevel = r0.299 + g0.587 + b*0.114; 根据当前颜色的灰度判断颜色深浅。
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 (亮度)
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);
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论