js小工具-16进制颜色值转rgb

JS 专栏收录该内容
20 篇文章 0 订阅

1.简介

css中颜色有多种书写方式,其中16进制写法和rgb的写法应该是比较通用和常见的了。这个代码的主要作用是把16进制的颜色值(16进制又叫hex)转成rgb形式的,如果输入的值已经是rgb或rgba形式的则原样返回

2.代码

var dc = {
	hexToRgb: function(hex){
		var result = null;
		var r,g,b;
		//如果已经是rbga或rgb则直接返回
		if(/([^\d]+\d{1,3}){3,4}[^\d]/.test(hex)) result = hex;
		else if(result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)){
			//6位颜色如#aaaaaa
			r = parseInt(result[1], 16);
	        g = parseInt(result[2], 16);
	        b = parseInt(result[3], 16);
			result = 'rgb('+r+','+g+','+b+')';
		}else if(result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex)){
			//3位颜色如#aaa
			r = parseInt(result[1]+result[1], 16);
	        g = parseInt(result[2]+result[2], 16);
	        b = parseInt(result[3]+result[2], 16);
			result = 'rgb('+r+','+g+','+b+')';
		}
	    return result;
	}
}

3.结语

本文写于20190826,仓促总结,有待完善。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值