JS rgba颜色转16进制

博客给出了RGBA值转化为16进制的例子,如rgba(194, 7, 15, 1)转化为#c2070f,并将对相关代码进行分析,属于前端信息技术领域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例子: 值为:rgba(194, 7, 15, 1) ,转化16进制为: #c2070f

//转化颜色
function getHexColor(color) {
  var values = color
    .replace(/rgba?\(/, '')
    .replace(/\)/, '')
    .replace(/[\s+]/g, '')
    .split(',')
  var a = parseFloat(values[3] || 1),
    r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
    g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
    b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
  return '#' +
    ('0' + r.toString(16)).slice(-2) +
    ('0' + g.toString(16)).slice(-2) +
    ('0' + b.toString(16)).slice(-2)
}
getHexColor('rgba(194, 7, 15, 1) '); // #c2070f

分析代码:

//转化颜色
function getHexColor(color) { // 传的color须为字符串
  var values = color
    .replace(/rgba?\(/, '')  // 把 "rgba(" 去掉,变成  "194, 7, 15, 1)"
    .replace(/\)/, '')		 // 把 ")" 去掉,变成 "194, 7, 15, 1"
    .replace(/[\s+]/g, '')   // 把空格去掉,变成 "194,7,15,1"
    .split(',')				 // 变成数组 [194,7,15,1]
  var a = parseFloat(values[3] || 1), // values[3]是rgba中的a值,没有的话设置a为1,a可能为小数,所以用parseFloat函数
    r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),  // 转换为16进制
    g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
    b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
  return '#' +
    ('0' + r.toString(16)).slice(-2) + // 转换后的16进制可能为一位,比如 7 就转换为 7 , 15 转换为 f
    ('0' + g.toString(16)).slice(-2) + // 当为一位的时候就在前面加个 0,
    ('0' + b.toString(16)).slice(-2) // 若是为两位,加 0 后就变成了三位,所以要用 slice(-2) 截取后两位
},
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值