JS-011-颜色进制转换(RGB转16进制;16进制转RGB)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 的您一份参考。

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

以上是关于JS-011-颜色进制转换(RGB转16进制;16进制转RGB)的主要内容,如果未能解决你的问题,请参考以下文章

详细请教:关于十进制RGB颜色值转换十六进制颜色值的算法

js 颜色16进制转RGB方法

十进制颜色转换成RGB(转)

求公式.十进制表示的RGB颜色换算成十进制表示的BGR颜色

js中如何把RGB颜色转换为16进制颜色

js_RGB转16进制(rgb2hex)