16进制颜色转RGB颜色

lihefei_coder

于 2019-03-12 15:44:04 发布

阅读量2.2k

点赞数

分类专栏：正则表达式文章标签：颜色 16进制 RGB 转换

本文链接：https://blog.youkuaiyun.com/lihefei_coder/article/details/88422145

版权

正则表达式专栏收录该内容

14 篇文章

订阅专栏

/**
 * 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)