JS 颜色RGB转换为16进制 相互转换 方法

/*RGB转换为16进制*/
const colorRgbToHex = (rgbStr: string) => {
  //十六进制颜色值的正则表达式
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8}|[0-9a-fA-f]{6}[0-9]{2})$/;
  if (reg.test(rgbStr)) {
    return rgbStr
  } else {
    const rgbArray = rgbStr.replace(/(?:\(|\)|rgba|rgb|RGBA|RGB)*/g, "").split(",");
    let strHex = "#";
  	  for (let i = 0; i < rgbArray.length; i++) {
      if (i !== 3) {
        if (rgbArray[i] == "0") {
          strHex += "00"
        } else {
              let newItem = Number(rgbArray[i]).toString(16)
              if (newItem.length < 2){
                newItem = "0" + newItem
              }
              strHex += newItem
        }
        } else {
        strHex += rgbArray[i] == "0" ? "" : Number(rgbArray[i]) * 100
      }
    }
   	 return strHex;
  }
}

/*16进制转换为RGB*/
const colorHexToRgb = (hexStr: string, opacity?: boolean) => {
  //rgb颜色值的正则表达式
  const reg = /^(rgba|rgb|RGBA|RGB)\([\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*(,[\s]*[0-9.]+[\s]*)*\)$/;
  if (reg.test(hexStr)) {
    return hexStr
  } else {
    hexStr = hexStr.toLowerCase()
    if (hexStr.length === 4) {
      let colorNew = "#";
      for (leti = 1; i < 4; i += 1) {
        const str = hexStr.slice(i, i + 1);
        colorNew += str + str;
      }
      hexStr = colorNew;
    }
    const rgbArray = [];
    for (let i = 1; i < hexStr.length; i += 2) {
      if (i < 7) {
        rgbArray.push(parseInt("0x" + hexStr.slice(i, i + 2)));
      }
      if (i >= 7 && opacity) {
        const str = hexStr.slice(i, i + 2)
        rgbArray.push(/^[a-f0-9]{2}$/.test(str) ? parseInt(`0x${str}`) / 255 : (Number(str) / 100).toString())
      }
    }
    return (opacity ? "rgba(" : "rgb(") + rgbArray.join(",") + ")";
  }
}

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李宏伟~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值