雨夜带刀's Blog

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三个颜色值的对象,这样就可以很方便的对颜色值进行计算了。

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 }
原载于:雨夜带刀's Blog
本文链接:http://stylechen.com/parsecolor.html
如需转载请以链接形式注明原载与原文地址。
上一篇:
下一篇:

“CSS颜色值转换”目前已有 8 条评论

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。