十六进制颜色与RGB颜色转换

最新推荐文章于 2024-08-10 22:56:59 发布

無言丶

最新推荐文章于 2024-08-10 22:56:59 发布

阅读量860

点赞数

分类专栏： JavaScript 文章标签： javascript css

本文链接：https://blog.csdn.net/Cs_Mervyn/article/details/108582872

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

十六进制颜色与RGB颜色转换以及追加透明度

包含透明度的转换和重置。
其中，用到的对象类型判断方法，详见《JavaScript中Object对象类型判断》；

// RGB转换为16进制 
export const toHex = (color, opacity) => {
  const reg = /^(rgb|RGB)\([\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*(,[\s]*[0-9.]+[\s]*)*\)$/;
  if (reg.test(color)) {
    let strHex = "#";
    const colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    for (let i = 0; i < colorArr.length; i++) {
      if (i === 3) {
        if (!isNumber(opacity)) {
          const opacityValue = parseInt(Number(colorArr[i]) * 100);
          if (opacityValue < 100 && opacityValue >= 10) strHex += opacityValue;
          else if (opacityValue < 10) strHex += "0" + opacityValue;
        }
      } else {
        const colorNum = colorArr[i] > 255 ? 255 : colorArr[i];
        const hex = Number(colorNum).toString(16);
        if (hex.length === 1) strHex += "0" + hex;
        else strHex += hex;
      }
    }
    if (isNumber(opacity)) {
      const opacityValue = parseInt(opacity * 100);
      if (opacityValue < 100 && opacityValue >= 10) strHex += opacityValue;
      else if (opacityValue < 10) strHex += "0" + opacityValue;
    }
    return strHex;
  } else return String(color);
};
// 16进制转换为RGB
export const toRgb = (color, opacity) => {
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6}|[0-9a-fA-f]{6}[0-9]{2})$/;
  color = color.toLowerCase();
  if (reg.test(color)) {
    if (color.length === 4) {
      let colorNew = "#";
      for (let i = 1; i < 4; i += 1) {
        const str = color.slice(i, i + 1);
        colorNew += str + str;
      }
      color = colorNew;
    }
    const colorChange = [];
    for (let i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    if (isNumber(opacity)) colorChange.push(opacity);
    else if (color.length === 9)
      colorChange.push(parseFloat("0." + color.slice(7, 8)));
    return "RGB(" + colorChange.join(",") + ")";
  } else return color;
};

调用方法：

  let color = "RGB( 26 ,43, 60,0.2 )";
  console.log(color , toHex(color), toHex(color, 0.8)); //结果"RGB( 26 ,43, 60,0.2 ) #1a2b3c20 #1a2b3c80"
  c = "#1a2b3f20";
  console.log(color, toRgb(color), toRgb(color, 0.8)); //结果"#1a2b3f20 RGB(26,43,63,0.2) RGB(26,43,63,0.8)"