寫一個色值深淺排序方法

核心：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);