JavaScript 十六進位制顏色和RGB顏色值的相互轉換

十六進位制顏色值和RGB顏色值的相互轉換，在實際應用中並不鮮見。

顏色值返回的值是RGB格式，雖然沒有錯誤，可能對於應用習慣來說有點彆扭。

所以很多朋友就希望能夠將其轉換為十六進位制的，下面就通過程式碼例項介紹一下如何實現此轉換。

[JavaScript] 純文字檢視 複製程式碼
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

上面的正規表示式能夠匹配十六進位制顏色值。

RGB顏色轉換為十六進位制:

[JavaScript] 純文字檢視 複製程式碼
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:

[JavaScript] 純文字檢視 複製程式碼
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 "RGB(" + sColorChange.join(",") + ")";
  }
  else{
    return sColor;        
  }
};