web前端：写一个色值深浅排序方法

作者:xy2370 更新于： 2020-03-05 21:28:23

　　流行的颜色及其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

　　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

　　div+=''+result[i]+'