实现颜色16进制转换RGB

原创

已于 2024-06-11 17:30:13 修改 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2024-05-31 17:51:24 首次发布

/**
 * 16进制转RGBA格式
 * @param colorStr 16进制颜色例：#706fd3
 * @param transparency 透明度例：0.8
 * @colorRgb
 */

export const colorRgb = (colorStr,transparency) => {
  //十六进制颜色值的正则表达式
  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  let sColor = colorStr.toLowerCase();
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = "#";
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    //处理六位的颜色值f
    let sColorChange = [];
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
    }
    return "rgba(" + sColorChange.join(",") + "," +transparency +")";
  } else {
    return sColor;
  }
};

代码定义了一个名为 colorRgb 的导出常量函数，其目的是将十六进制颜色字符串转换成带有透明度（transparency 参数）的 RGB 格式的字符串。以下是函数的详细步骤：