js将十六进制颜色转透明度的函数

Posted 2023-03-24

参考技术A

js将十六进制颜色转透明度的函数

CSS颜色的表示方式一般有两种10进制与16进制，分别是【rgb(255, 100, 0)】【#FF0000】。两个16进制组合数是0-255（16*16=256）。

颜色是RGB红绿蓝三原色组成的，16进制的颜色由6位字符组成（如：FF0000，相隔重复类型也可以简写成F00），如果16进制要包含透明度必须由八位字符组成（如：FFDDAA80）。

平时css样式的透明度都是按十进制计算的，如：opacity: 0.5;与background-color: rgba(255, 100, 0, 0.8);。

10进制的255阶为不透明（0%），0阶为100%透明。所以如果要获取50%透明度，255 * 0.5 = 127.5;将127.5四舍五入再转16进制，方法如下：

下面方法是0%-100%的透明度输出：

JS-011-颜色进制转换（RGB转16进制；16进制转RGB）

　　在网页开发的时候，经常需要进行颜色设置，因而经常需要遇到进行颜色进制转换的问题，例如：RGB转16进制；16进制转RGB），前几天在测试的时候，发现网站的颜色进制转换某类16进制颜色（例如：#000080，#FA08FA）转换时总是提示颜色非法，看了一下 js 源码，发现其进制转换的方法是错误的。找了一下度娘和谷大爷，最终写了一个颜色转换的小方法，源码如下所示：

　　

String.prototype.colorHex2Rgb = function(){
    var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
    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 "RGB(" + sColorChange.join(",") + ")";
    }else{
        return sColor;    
    }
};

String.prototype.colorRgb2Hex = function(){
    var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
    var that = this;
    
    if(/^(rgb|RGB)/.test(that)){
        var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
        var strHex = "#";
        
        for(var i=0; i<aColor.length; i++){
            var hex = Number(aColor[i]).toString(16);
        
            if(hex === "0"){
                hex += hex;    
            }
            
            strHex += hex;
        }
        
        if(strHex.length !== 7){
            strHex = that;    
        }
        
        return strHex.toUpperCase();
    }else if(reg.test(that)){
        var aNum = that.replace(/#/,"").split("");
        
        if(aNum.length === 6){
            return that;    
        }else if(aNum.length === 3){
            var numHex = "#";
        
            for(var i=0; i<aNum.length; i+=1){
                numHex += (aNum[i]+aNum[i]);
            }
            
            return numHex.toUpperCase();
        }
    }else{
        return that.toUpperCase();    
    }
};

 

　　使用示例：

"#000080".colorHex2Rgb()     ----> RGB(0,0,128)
"#FA0080".colorHex2Rgb()     ----> RGB(250,0,128)
"#888".colorHex2Rgb()          ----> RGB(136,136,136)
"#888888".colorHex2Rgb()     ----> RGB(136,136,136)


"RGB(128,128,128)".colorRgb2Hex()   ---->  #808080
"RGB(255,128,128)".colorRgb2Hex()   ---->  #FF8080
"RGB(128,0,255)".colorRgb2Hex()       ---->  #8000FF

 

至此， JS-011-颜色进制转换（RGB转16进制；16进制转RGB） 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^