颜色转换：十六进制转RGBA并可控制透明度

最新推荐文章于 2025-03-11 14:55:23 发布

二水你要努力啊

最新推荐文章于 2025-03-11 14:55:23 发布

阅读量983

点赞数

分类专栏： color

本文链接：https://blog.csdn.net/qq_33601443/article/details/112309822

版权

JavaScript 颜色转换十六进制 RGBA 函数

关键词由CSDN通过智能技术生成

color 专栏收录该内容

1 篇文章

订阅专栏

这是一个JavaScript函数，名为changeHexToRgba，它接受一个十六进制颜色字符串和一个透明度参数，然后根据输入的颜色字符串长度（3位、6位或8位），将其转换为RGBA格式的字符串。函数首先通过正则表达式验证颜色字符串的合法性，然后进行相应的处理，最后返回RGBA值。

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

changeHexToRgba(str,alpha) {  
    const REGCOLOR = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;  
    const ISRGBA = REGCOLOR.test(str);  
    if (ISRGBA === false) {    
        throw Error("Not a valid value");  
    }  
    // 去掉#号  
    const colorStr = str.slice(1);  
    const len = colorStr.length;  
    if (len === 3) {   
        const color = colorStr
            .split("")
            .map(ele => parseInt(`0x${ele.repeat(2)}`))
            .join(",");
        return `rgba(${color},${alpha})`;  
    }
    const color = colorStr
        .match(/[A-z0-9]{2}/g)
        .map(ele => parseInt(`0x${ele}`));  
    if (len === 6) {
        return `rgba(${color.join(",")},${alpha})`;  
    }  
    if (len === 8) {    
        const opacity = (color.pop() / 255).toFixed(2);
        return `rgba(${color.slice(0, 3).join(",")}, ${opacity})`;  
    }
}