rgba和hex之间转换

最新推荐文章于 2025-05-22 16:20:44 发布

MR·Feng

最新推荐文章于 2025-05-22 16:20:44 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js color

本文链接：https://blog.csdn.net/weihaifeng163/article/details/87720382

js 专栏收录该内容

20 篇文章

订阅专栏

本文分享了如何使用JavaScript将十六进制颜色代码(hex)转换为RGBA格式，以及从RGBA格式回转为hex代码的方法。提供了详细的代码示例，包括正则表达式的使用和颜色值的转换逻辑。

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

分享颜色插件【1:spectrum：https://www.bootcdn.cn/spectrum/ 2:官网：http://bgrins.github.io/spectrum/】

1、hex转rgba

参考网站：https://blog.csdn.net/jyao_in/article/details/80615474

var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
String.prototype.colorRgb = function(){  
    var sColor = this.toLowerCase();  
    if(sColor && reg.test(sColor)){  
        if(sColor.length === 4){  
            var sColorNew = "#";  
            for(var i=1; i<4; i+=1){  
                sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));     
            }  
            sColor = sColorNew;  
        }
        var sColorChange = [];  
        for(var i=1; i<7; i+=2){  
            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));    
        }
        return {red: sColorChange[0], green: sColorChange[1], blue: sColorChange[2], alpha: null}; 
    }else{  
        return sColor;
    }  
}
var color = '#ffffff';
color.colorRgb() // {red: 255, green: 255, blue: 255, alpha: null} (alpha自己添加进去的)

2、rgba转hex

参考网站：https://www.youyong.top/article/1159366a4e3b0

function colorHex(value) {
    if(!value) return '#ffffff';
    if(!isObj(value) && value.includes('#')) return value;
    var sColor = [value.red.toString(),value.green.toString(),value.blue.toString()];
    value = '';
    sColor.map(v => {
        v = parseInt(v.replace(/[^\d]/gi, ''), 10).toString(16);
        console.log(v.length == 1 ? "0" + v : v);
        value += v.length == 1 ? '0'+v : v;
    }).join('');
    return '#'+ value;
}
var obj = {red: 255, green: 255, blue: 255, alpha: null}
colorHex(obj)  // #ffffff