颜色的秘密

在JS开发中，常会遇到样式中颜色的问题，

一般的颜色表示形式是一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。从w3c的Colors部分 可以知道有以下表现形式：
1）em { color: red }
2）em { color: #f00 }
3）em { color: #ff0000 }
4）em { color: rgb(255,0,0) }     
5）em { color: rgb(100%, 0%, 0%) }
以上都是表示同一种颜色（红色）。
获取颜色属性的形式在IE和FF并不同，FF统一返回第四种形式，IE则按照设置时的形式返回。

RGB的形式中包括16进制形式（2,3）和10进制形式（4,5）。

提示： 仅有 16 种 颜色名 被 W3C 的 HTML 4.0 标准支持，它们是：black(#000)、blue(#00f)、lime(#0f0)、aqua(#0ff)、red(#f00)、fuchsia(#f0f)、yellow(#ff0)、white(#fff)、silver(#c0c0c0)、navy(#000080)、green(#008000)、teal(#008080)、maroon(#800000)、gray(#808080)、olive(#808000)、purple(#800080)。

为了获得统一的颜色表现形式，得把16进制转化为10进制，或10进制转化为16进制。

16进制转化为10进制，是用parseInt(a,n);n是a的进制数，默认为10,那这里n必须为16；如“#2233ef”,_c='#2233ef'; _a=parseInt(_c.substr(1,2),16); _b=parseInt(_c.substr(3,2),16); _d=parseInt(_c.substr(5,2),16); _k='rgb('+_a+', '+_b+', '+_d+')'; return _k;

10进制转化为16进制，则用toString(16);转化为16进制后，如果字符是在0-9m,a-f/A-F,之间，必须在原字符前加'0',

var l=/[0-9a-f]/i; function v(a){ a=a.toString(16); if(a.length==1&&a.match(l)){ a='0'+a; } return a; }

至于百分比转换为数字，0%对应0,100%对应255。

//如rgb(10%, 25%, 0%) 10 * 2.55 = 25.5; 25 * 2.55 = 63.75; 0 * 2.55 = 0; //上述结果是用计算器得出的结果，按程序来算，结果后的小数点后的位数可能会有多位，所以也要处理一下，就让小数点后带一位小数吧 (25.5).toFixed(1); //因为颜色只能是整数，得采用四舍五入的函数Math.round() Math.round((25.5).toFixed(1)); //最终结果为： rgb(26, 64, 0);

下面是这两种形式的互相转化。互相转换之间数据可能不会完全一致

将 #rrggbb 转换为 rgb(rr, gg, bb) 请在方框中填入3个或6个（0-9/a-f/A-F）的字符，如“3a3430”,“30f”

16 进制 # rgb(rr, gg, bb)
红色(R)
绿色(G)
蓝色(B)

将 rgb(rr, gg, bb) 转换为 rgb(rr%, gg%, bb%), #rrggbb 请在方框中填入0-255的整数，如“222”

红色(R)
绿色(G)
蓝色(B)
rgb(rr%, gg%, bb%)
16 进制 　#

将 rgb(rr%, gg%, bb%) 转换为 rgb(rr, gg, bb), #rrggbb 请在方框中填入0-100的整数，如“30”

红色(R) %
绿色(G) %
蓝色(B) %
rgb(rr, gg, bb)
16 进制 # <script type="text/javascript"> </script>