一、關於顏色的表示
顏色的表示方式不知一種，從photoshop的取色面板就可以看出，如下：
上圖共顯示了5種顏色的表示方法：HSB,lab,RGB,CMYK與十六進制表示法
在CSS中，我們也經常與顏色打交道，其中有color(文字顏色)，還有一個就是background-color背景顏色，還有就是border-color。一般，我們習慣用十六進制表示顏色，//zxx:AS中也是如此，不過是以”0x”打頭，而不是”#”，例如黑色表示爲：#000000;在CSS 2.1中，還支持RGB的顏色表示法，IE，Firefox等瀏覽器均支持，例如黑色可以表示爲RGB(0, 0, 0);
在CSS3中，增加了 HSL colors HSLA colors RGBA colors表示方法，不過這些這裏不討論。
更多顏色的知識可以點擊這裏：維基百科-顏色
二、顏色表示方式轉換的必要性
這確實是個疑問，雖說在CSS中有兩種顏色表示方法，那麼爲什麼還有進行顏色表示方式的轉換呢，不都是一樣的表示顏色嗎？
確實，大多數情況下，轉換時沒有必要的，但是web頁面千變萬化，遇到的情況千奇百怪，是有需要轉換的情況。
舉個我遇到的例子吧，我去年9月份，學習Ajax的時候，做過一個Ajax+PHP多人在線聊天室聊天室（訪問該頁面點擊這裏），其中裏面有個很重要的工具就是取色面板，用以改變顯示的文字顏色的。見下圖：
裏面對顏色字符做了些處理，就是以十六進制的形式顯示。做處理歸根結底的原因就是瀏覽器的差異，差異如下：
在Firefox瀏覽器下（chrome同樣），即使你使用了十六進制形式表示了顏色值，但是在HTML頁面中，其卻是以RGB形式表示的，這與IE瀏覽器是不一致的。也就是說，如果不做字符顯示的處理的話，那麼Firefox瀏覽器下，上面的聊天顏色面板獲得的值就是類似於RGB(255,0,0)這種形式的，而不是”#FF0000″，我們可以做個簡單的測試，看如下的代碼。
<button style="color:#ff3300;" οnclick="javascript:alert(this.style.color);">點擊我</button>
您可以自己點擊下面的按鈕測試一下：
可見，這種顏色表示的差異性，使得有時候，顏色轉換成爲的必須。
三、JavaScript顏色轉換的核心
JavaScript顏色轉換的核心就是進制間的轉換。RGB格式其實就是十進制表示法，所以，十六進制顏色與RGB顏色的轉換就是十六進制與十進制之間的轉換。
十六進制轉換爲十進制相對容易些，核心代碼如下示例：parseInt("0xFF")，其結果就是255，”0x”就表明當前是16進制，由於parseInt後面無參數，默認就是轉換爲10進制了。
十進制轉換爲16進制，核心代碼如下：var num=255; num.toString(16);，其結果是FF。”16″表示數值轉換爲16進制字符串。
四、JavaScript顏色表示方式的轉換的實現
這裏的細節就不展示了，代碼也不在頁面上展示了，我不喜歡出現過長的代碼。我已經將顏色轉換的js代碼寫在一個文件中的，相對於一個小小的顏色轉換插件，所以您只要如下使用就可以輕鬆實現顏色的轉換了：
1、首先調用JavaScript文件。
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/zxx.color_exchange.js"></script>
您可以狠狠地點擊這裏：此js文件下載（右鍵-[鏈接|目標]另存爲）
zxx.color_exchange.js插件代碼如下：
//十六進制顏色值域RGB格式顏色值之間的相互轉換//-------------------------------------//十六進制顏色值的正則表達式var reg
= /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;/*RGB顏色轉換爲16進制*/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[i]).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[i]+aNum[i]); } return numHex; } }else{ return that;
}};//-------------------------------------------------/*16進制顏色轉爲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; } //處理六位的顏色值 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;
}}; |
2、使用顏色轉換方法。如下：
var sRgb = "RGB(23, 245, 56)" , sHex = "#34538b"; var sHexColor = sRgb.colorHex(); var sRgbColor = sHex.colorRgb();
其中colorHex()表示轉換爲十六進制方法，colorRgb()表示轉爲RGB顏色值的方法。
您可以狠狠地點擊這裏：測試demo頁面
您也可以直接在下面進行測試：
十六進制顏色值：
RGB(52,83,139)
GRB顏色值：
#17f538
說明：此JavaScript實現的一個小小原則是“以統一的形式顯示”，所以十六進制縮寫的顏色值（如：#333）會以#333333顯示。如果轉爲的字符格式不匹配或是值溢出返回，則會原值返回。例如：RGB(0,0,256)會返回RGB(0,0,256)，#3456會返回#3456，#egd會返回#egd。
