一、关于颜色的表示
颜色的表示方式不知一种，从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。
