javascript如何设置颜色(2)-木庄网络博客

三、颜色格式转化

在编码过程中，经常会遇到要将颜色格式相互转化的问题,其中十六进制格式和RGB格式是可以相互转化的，但是RGBA格式由于多了前两者没有的Alpha透明属性，所以和前两者转化会丢失Alpha值，不建议进行转化，下面是我的颜色转化的方法：

//十六进制转为RGB
function hex2Rgb(hex) { 
    var rgb = []; // 定义rgb数组
    if (/^\#[0-9A-F]{3}$/i.test(hex)) {
    //判断传入是否为#三位十六进制数
        let sixHex = '#';
        hex.replace(/[0-9A-F]/ig, function(kw) {
        sixHex += kw + kw; //把三位16进制数转化为六位
    });
        hex = sixHex; //保存回hex
    }
    if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数
        hex.replace(/[0-9A-F]{2}/ig, function(kw) {
            rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组
        });
        return `rgb(${rgb.join(',')})`; //输出RGB格式颜色
    } else {
        console.log(`Input ${hex} is wrong!`);
        return 'rgb(0,0,0)';
    }
}
//RGB转为十六进制
function rgb2Hex(rgb) {
    if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGB
        var hex = '#'; //定义十六进制颜色变量
        rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字
        kw = parseInt(kw).toString(16); //转为十六进制
        kw = kw.length < 2 ? 0 + kw : kw; //判断位数，保证两位
        hex += kw; //拼接
    });
        return hex; //返回十六进制
    } else {
        console.log(`Input ${rgb} is wrong!`);
        return '#000'; //输入格式错误,返回#000
    }
}