写一个色值深浅排序方法

核心：var grayLevel = r0.299 + g0.587 + b*0.114; 根据当前颜色的灰度判断颜色深浅。

步骤一： 转换色值为rgb格式

1. 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;
       }
   

2. hel2rgb: hel格式似乎前端不怎么用的样子， 格式 ：hsl(208, 0.36, 0.39)
   h: hue(色相) 在带有色相角度的值域里[0, 360]中对应的色相角度。
   s: Saturation (饱和度)
   l: Lightness (亮度)

   基本步骤：

   1. 转换h,s,light为[0-1]中的值。
   2. if (s == 0) ==> r,g,b = light; 表明此时颜色是非彩色，或灰色的；
   3. 否则， 根据light判断, temp2 = light < 0.5 ? light * (1ight + s) : light + s - light * s;
   4. temp1 = 2 * light - temp2;
   5. 获取r,g, b
      r = h + 1/3;
      g = h;
      b = h - 1/3;
   6. 对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);