根据颜色深浅排序

需求

最近参照组件库的设计，获取常用的组件颜色，比如这样的一系列灰色值

#fafafc
#f8f8f8
#f5f5f5
#efefef
#e0e0e0
#d9d9d9
#cccccc
#cbcbcb
#bfbfbf

然后要给它们由浅到深排个序，便于使用时知道加深程度，有个对比。

解决方案

将获取到的颜色统一转化为rgb格式，用公式r*0.299 + g*0.587 + b*0.114计算得到每一个颜色的灰度值，从小到大进行由浅到深的排序。

其中还要解决颜色的转化，以支持识别各类颜色。

代码

转换十六进制色值为rgb格式

function hextoRgb(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;
}

hsl格式 转rgb

function getMid(str) {
  var left = str.indexOf("(") + 1;
  var right = str.indexOf(")");
  return str.slice(left, right);
}
//  hsl格式 转rgb
function hslToRgb(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;
    }
  }
}

获取颜色灰色值

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

各类颜色判断

// 是否为rgb颜色值
function isRgb(color) {
  return /^rgb/.test(color);
}
// 是否为十六进制颜色值
function isHex(color) {
  return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
}
// 是否为hsl颜色值
function isHsl(color) {
  return /^hsl/.test(color);
}

工具

小编直接做了一个颜色转换工具，方便直接使用

颜色排序

总结

主要代码也是参照网上大神来做的，小编觉得还有很多优化空间，包括各类颜色的转换，颜色的处理，颜色json的处理等。

参考

• 写一个色值深浅排序方法