流行的颜色及其RGB值。可以使用这些值改变背景色、文本颜色和链接颜色。这些值以十六进制表示，前两位数字代表红色值;接下来两位表示绿色;最后两位表示蓝色。每个红色、绿色或蓝色值可以在00(没有那种颜色)到FF(完全是那种颜色)之间变化。
核心：vargrayLevel=r0.299+g0.587+b*0.114;根据当前颜色的灰度判断颜色深浅。
步骤一：转换色值为rgb格式
hex2rgb:hex格式是16进制,转换为rgb其实就是16进制转换为10进制，较为简单。
functionhex2rgb(color){
color=color.slice(1);
varrgb="";
for(vari=0;i<color.length;i+=2){
varend=i+2
rgb+=parseInt(color.slice(i,end),16).toString()+",";
}
rgb=rgb.slice(0,rgb.length-1)
rgb="rgb("+rgb+")"
returnrgb;
}
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进行判断；
functiongetMid(str){
varleft=str.indexOf('(')+1;
varright=str.indexOf(')');
returnstr.slice(left,right);
}
functionhel2rgb(color){
vararr=getMid(color).split(',');
varr,g,b;
varh=toNum((arr[0]/360)+''),s=toNum(arr[1]),light=toNum(arr[2]);//h(色相)s(饱和度)l(亮度)
vartemp2,temp1;
if(s==0){
r=g=b=light;
}else{
temp2=light<0.5?light*(1+s):light+s-light*s;
temp1=2*light-temp2;
varh2rgb=function(p,q,t){
if(t<0)t+=1;
if(t>1)t-=1;
if(t<1/6)returnp+(q-p)*6*t;
if(t<1/2)returnq;
if(t<2/3)returnp+(q-p)*(2/3-t)*6;
returnp
}
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)+')';
}
functiontoNum(str){
varrex=/[0-9]+/g;
if(str.indexOf('%')>0){
return(str.match(rex)[0])/100;
}else{
if(typeof(+str)==="number"){
return+str;
}
}
}
步骤二：获取颜色灰色值：
之前已经将颜色转换为rgb,通过核心公式获取颜色灰度值，从而进行判断。
functionisRgb(color){
return/^rgb/.test(color)
}
functionisHex(color){
return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)
}
functionisHsl(color){
return/^hsl/.test(color);
}
functiongrayLevel(color){
color=isRgb(color)
?color
:isHex(color)
?hextoRgb(color)
:hslToRgb(color);
vararr=getMid(color).split(',')
varr=arr[0],g=arr[1],b=arr[2];
returnr*0.299+g*0.587+b*0.114
}
步骤三：排序
functionsortColor(colors){
returncolors.sort(function(a,b){
returngrayLevel(b)-grayLevel(a)
})
}
//调用
varcolor=['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)']
varresult=sortColor(color)
vardiv=''
for(;i<color.length;i++){
div+='<divstyle="width:100px;height:50px;background:'+result[i]+'">'+result[i]+'</div>'
}
$('.main').append(div);
色值:一种颜色指的是该种颜色在不同的颜色模式中所对应的颜色值。如红色在RGB颜色模式中所对应的值就是255，0，0;绿色在RGB颜色模式中所对应的值就是0，255，0;蓝色在RGB颜色模式中所对应的值就是0，0，255。
