CSS颜色值的转换

　　CSS的颜色值有3种表示方式，为十六进制、RGB、颜色名称，用代码表示分别为：

　　color : #345456;

　　color : rgb(255,152,10);

　　color : red;

　　平时在编写CSS代码时，在设置颜色值时使用的最多的方式是十六进制。如果要对颜色值进行计算，就必须将十六进制的颜色值转换成RGB模式。那么如何进行转换呢？

　　别急，先来看看十六进制的颜色值和RGB颜色值之间的对应关系。比如上面的十六进制的颜色值：#345456，其中的前2位“34”对应R，中间2位“54”对应G，最后2位“56”对应B，有了这个对应关系那么剩下的就是进制转换的事了。

　　javascript中使用parseInt()方法可以将将第二个参数设置成16就可以将十六进制转换成十进制。需要注意的是，CSS中的十六进制颜色值支持简写，在转换的过程中要考虑到简写的处理办法。

　　下面是我写的一个将十六进制的颜色值转换成RGB的函数，该函数接受一个十六进制或RGB的CSS颜色值，返回的是一个包含了r、g、b三个颜色值的对象，这样就可以很方便的对颜色值进行计算了。

　　view sourceprint?

　　var parseColor=function( val ){

　　var r, g, b;

　　// 参数为RGB模式时不做进制转换，直接截取字符串即可

　　if( /rgb/.test(val) ){

　　var arr=val.match( /\d+/g );

　　r=parseInt( arr[0] );

　　g=parseInt( arr[1] );

　　b=parseInt( arr[2] );

　　}

　　// 参数为十六进制时需要做进制转换

　　else if( /#/.test(val) ){

　　var len=val.length;

　　// 非简写模式 #0066cc

　　if( len===7 ){

　　r=parseInt( val.slice(1, 3), 16 );

　　g=parseInt( val.slice(3, 5), 16 );

　　b=parseInt( val.slice(5), 16 );

　　}

　　// 简写模式 #06c

　　else if( len===4 ){

　　r=parseInt( val.charAt(1) + val.charAt(1), 16 );

　　g=parseInt( val.charAt(2) + val.charAt(2), 16 );

　　b=parseInt( val.charAt(3) + val.charAt(3), 16 );

　　}

　　}

　　else{

　　return val;

　　}

　　return {

　　r : r,

　　g : g,

　　b : b

　　}

　　};

　　下面是调用结果：

　　parseColor( '#009652' ); // { r=0, g=150, b=82 }

　　parseColor( '#06c' ); // { r=0, g=102, b=204 }

　　parseColor( 'rgb(255,10,102)' ); // { r=255, g=10, b=102 }