JS 十六进制颜色码转化RGBA颜色值

工作中遇到了一个很奇怪的需求。背景颜色要支持选择。后端返回给我两个参数。一个是颜色是十六进制的。一个是透明度是0到1的小数。明明element ui上有可以选择透明度的颜色选择器。产品觉得客户不会用。硬要拆成两个组件。

好吧。。。顺着产品的意思来。但不能直接用背景色+opacity。因为opacity会把文字也做透明。必须要用到rgba的颜色来做。下面上代码

function getcolor(color, opacity) {
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "rgba(" + colorChange.join(",") + "," + opacity + ")";
  } else {
    return color;
  }
}

getcolor('#666', 0.8) //'rgba(102,102,102,0.8)'
getcolor('#ff0000', 0.5) //'rgba(255,0,0,0.5)'

最后附上一个很好用的网站 可以自动转颜色 www.sioe.cn/yingyong/ya…