前端JavaScript-十六进制颜色和RGB颜色值的相互转换

十六进制颜色值和RGB颜色值的相互转换，在实际应用中并不鲜见。

颜色值返回的值是RGB格式，虽然没有错误，可能对于应用习惯来说有点别扭。

所以很多朋友就希望能够将其转换为十六进制的，下面就通过代码实例介绍一下如何实现此转换。

var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

上面的正则表达式能够匹配十六进制颜色值。

RGB颜色转换为十六进制:

String.prototype.colorHex = function(){
  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).toString(16);
      if(hex === "0"){
        hex += hex;        
      }
      strHex += hex;
    }
    if(strHex.length !== 7){
      strHex = that;        
    }
    return strHex;
  }
  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+aNum);
      }
      return numHex;
    }
  }
  else{
    return that;        
  }
};

十六进制转换成RGB:

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;
    }
    //处理六位的颜色值  web前端学习交流扣qun：731771211   志同道合者进！
    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;        
  }
};