js 改变颜色透明度 十六进制 RGBA

/**
 * 十六进制color颜色/RGBA/RGB,改变透明度
 * @param {*} thisColor #555 rgba(85,85,85,0.6) rgb(85,85,85)
 * @param {*} thisOpacity 0.7
 * @returns rgba(85,85,85,0.7)
 */
export function getOpacityColor(thisColor, thisOpacity) {
  var theColor = thisColor.toLowerCase();
  //十六进制颜色值的正则表达式
  var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 如果是16进制颜色
  if (theColor && r.test(theColor)) {
    if (theColor.length === 4) {
      var sColorNew = '#';
      for (var i = 1; i < 4; i += 1) {
        sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
      }
      theColor = sColorNew;
    }
    //处理六位的颜色值
    var sColorChange = [];
    for (var j = 1; j < 7; j += 2) {
      sColorChange.push(parseInt('0x' + theColor.slice(j, j + 2)));
    }
    return 'rgba(' + sColorChange.join(',') + ',' + thisOpacity + ')';
  }
  // 如果是rgba或者rgb
  if (theColor.startsWith('rgb')) {
    let numbers = theColor.match(/(\d(\.\d+)?)+/g);
    numbers = numbers.slice(0, 3).concat(thisOpacity);
    return 'rgba(' + numbers.join(',') + ')';
  }

  return theColor;
}
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RGBA(Red, Green, Blue, Alpha)是一种用来描述颜色的表示方式,其中红色、绿色和蓝色的分量加上透明度的值共同确定了一个颜色RGBA颜色可以通过将三原色的分量值和透明度的值转换为十六进制表示来进行转换。 具体而言,对于一个十六进制颜色值,例如#RRGGBB,RR表示红色分量的值,GG表示绿色分量的值,BB表示蓝色分量的值,这些值的范围是0到255(或者00到FF)。而透明度的值以十六进制的方式表示为00到FF,其中00表示完全透明(即不可见),FF表示完全不透明(即完全可见)。 要将颜色值从RGBA转换为十六进制颜色,我们可以简单地将红色、绿色和蓝色的分量值以及透明度的值转换为十六进制表示,然后将它们连在一起即可。例如,如果我们有一个RGBA颜色rgba(255, 0, 0, 0.5),那么它的十六进制表示为#FF000080。其中,FF表示红色的分量值255,00表示绿色的分量值0,00表示蓝色的分量值0,80表示透明度的值0.5(转换为十六进制时乘以255)。 相反地,要将一个十六进制颜色转换为RGBA颜色,我们需要将十六进制颜色值拆分为红色、绿色和蓝色的分量以及透明度的值,然后将它们转换为十进制表示。例如,一个十六进制颜色值为#00FF0080,我们可以将它分解为红色分量值00(转换为十进制时为0)、绿色分量值FF(转换为十进制时为255)、蓝色分量值00(转换为十进制时为0)和透明度的值80(转换为十进制时为128)。 通过以上方法我们可以实现RGBA与十六进制颜色的互相转换。如果需要进行这样的转换,可以使用各种在线工具或编程语言中提供的函数来帮助我们进行转换。这些工具或函数可以接受RGBA或十六进制颜色作为输入,并返回转换后的结果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值