16进制颜色转RGB颜色

/**
 * 16进制颜色转rgb颜色
 * @param {string} val 16进制颜色值
 * @param {number} opa 不透明度,取值0~1
 * @return {string} 转换后的rgb或rgba颜色值字符串
 */

function colorToRGB(val, opa) {

    const pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则
    const flag = typeof opa == 'number'; //判断是否有设置不透明度

    if (!pattern.test(val)) { //如果值不符合规则返回空字符
        return '';
    }

    let v = val.replace(/#/, ''); //如果有#号先去除#号
    let rgbArr = [];
    let rgbStr = '';

    for (let i=0; i<3; i++) {
            let item = v.substring(i*2, i*2+2);
            let num = parseInt(item, 16);
            rgbArr.push(num);
    } 
    
    rgbStr = rgbArr.join();
    rgbStr = 'rgb' + (flag ? 'a': '') + '(' + rgbStr + (flag ? ',' + opa : '')+ ')';
    return rgbStr;
}

/* 使用示例 */
const color1 = colorToRGB('#8C13FF');
const color2 = colorToRGB('#8C13FF', .8);

console.log(color1,color2); 
//rgb(140,19,255) 
//rgba(140,19,255,0.8)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值