javascript⼗六进制与RGB颜⾊值的相互转换 --------------------------------
javascript ⼗六进制与RGB颜⾊值的相互转换
⼀、关于颜⾊的表⽰
颜⾊的表⽰⽅式不知⼀种，从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中，增加了 表⽰⽅法，不过这些这⾥不讨论。
⼆、颜⾊表⽰⽅式转换的必要性
这确实是个疑问，虽说在CSS中有两种颜⾊表⽰⽅法，那么为什么还有进⾏颜⾊表⽰⽅式的转换呢，不都是⼀样的表⽰颜⾊吗？
确实，⼤多数情况下，转换时没有必要的，但是web页⾯千变万化，遇到的情况千奇百怪，是有需要转换的情况。
举个我遇到的例⼦吧，我去年9⽉份，学习Ajax的时候，做过⼀个Ajax+PHP多⼈室聊天室（访问该页⾯点击），其中⾥⾯有个很重要的⼯具就是取⾊⾯板，⽤以改变显⽰的⽂字颜⾊的。见下图：
⾥⾯对颜⾊字符做了些处理，就是以⼗六进制的形式显⽰。做处理归根结底的原因就是浏览器的差异，差异如下：
在Firefox浏览器下（chrome同样），即使你使⽤了⼗六进制形式表⽰了颜⾊值，但是在HTML页⾯中，其却是以RGB形式表⽰的，这与IE浏览器是不⼀致的。也就是说，如果不做字符显⽰的处理的话，那么Firefox浏览器下，上⾯的聊天颜⾊⾯板获得的值就是类似于我不是谁的偶像
RGB(255,0,0)这种形式的，⽽不是”#FF0000″，我们可以做个简单的测试，看如下的代码。 <button οnclick="javascript:alert(lor);">点击我</button>
结果Firefox下的显⽰是，如下图：
⽽IE浏览器下则是：
您可以⾃⼰点击下⾯的按钮测试⼀下：
点击我
swot模型>电流信号源可见，这种颜⾊表⽰的差异性，使得有时候，颜⾊转换成为的必须。
三、JavaScript颜⾊转换的核⼼
JavaScript颜⾊转换的核⼼就是进制间的转换。RGB格式其实就是⼗进制表⽰法，所以，⼗六进制颜⾊与RGB颜⾊的转换就是⼗六进制与⼗进制之间的转换。
⼗六进制转换为⼗进制相对容易些，核⼼代码如下⽰例：parseInt("0xFF")，其结果就是255，”0x”就表明当前是16进制，由于parseInt 后⾯⽆参数，默认就是转换为10进制了。
⼗进制转换为16进制，核⼼代码如下：var num=255; String(16);，其结果是FF。”16″表⽰数值
转换为16进制字符串。
四、JavaScript颜⾊表⽰⽅式的转换的实现
这⾥的细节就不展⽰了，代码也不在页⾯上展⽰了，我不喜欢出现过长的代码。我已经将颜⾊转换的js代码写在⼀个⽂件中的，相对于⼀个⼩⼩的颜⾊转换插件，所以您只要如下使⽤就可以轻松实现颜⾊的转换了：
1、⾸先调⽤JavaScript⽂件。
<script type="text/javascript" src="www.zhangxinxu/study/lor_exchange.js"></script>
您可以狠狠地点击这⾥：（右键-[链接|⽬标]另存为）
2、使⽤颜⾊转换⽅法。如下：
var sRgb = "RGB(23, 245, 56)" , sHex = "#34538b";
var sHexColor = lorHex();
var sRgbColor = lorRgb();陈潇的剩余人生店
其中colorHex()表⽰转换为⼗六进制⽅法，colorRgb()表⽰转为RGB颜⾊值的⽅法。
您可以狠狠地点击这⾥：
您也可以直接在下⾯进⾏测试：
马提尼克岛 长高
⼗六进制颜⾊值：
243,174,51
GRB颜⾊值：
说明：此JavaScript实现的⼀个⼩⼩原则是“以统⼀的形式显⽰”，所以⼗六进制缩写的颜⾊值（如：#333）会以#333333显⽰。如果转为的字符格式不匹配或是值溢出返回，则会原值返回。例如：RGB(0,0,256)会返回RGB(0,0,256)，#3456会返回#3456，#egd会返回#egd。
五、结语
我js资历尚浅，所以代码可能会遇到以下些不⾜：
1、可能漏了些特殊情况；
2、在效率⽅⾯还可以进⼀步改进；
3、在算法上可以进⼀步优化；
欢迎指出这些不⾜。
亚洲卫星
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议