rgba与十六进制的相互转换，以及rgba的校验

RGBA与十六进制颜色值的互换及校验

最新推荐文章于 2022-10-22 10:17:37 发布

原创最新推荐文章于 2022-10-22 10:17:37 发布 · 4.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#rgba #rgb #十六进制 #颜色值

H5 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文介绍了如何进行RGBA颜色值与十六进制颜色值之间的转换，并提供了RGBA格式正确性的正则检测方法。无论是从RGBA转换到十六进制，还是反过来，都是颜色处理中常见的需求。同时，正确校验RGBA格式对于确保颜色数据的准确性至关重要。

1、将rgba颜色值转换为十六进制(rgb转十六进制同理)

RGBToHex(rgba){
	let str = rgba.slice(5,rgba.length - 1),
		arry = str.split(','),
		opa = Number(arry[3].trim())*100,
		strHex = "#",
		r = Number(arry[0].trim()),
		g = Number(arry[1].trim()),
		b = Number(arry[2].trim());
	
	strHex += ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    
    return {color:strHex,opacity:opa};
}

2、将十六进制颜色值转换为rgba(十六进制转rgb同理)

HexToRGB(color,opacity){
	let newColor = 'rgba(';

	//判断是三位还是六位
	if(color.length === 4){
		let arry = [];

		for(let i = 1;i < color.length;i++){
			arry.push(parseInt("0x" + color[i] + color[i]));
		}

		arry.forEach(function(item){
			newColor += item + ', ';
		});
		newColor += opacity/100 + ')';

		return newColor;
	}else{
		let arry = [];

		for(let i = 1;i < color.length;i += 2){
			arry.push(parseInt("0x" + color.slice(i,i+2)));
		}

		arry.forEach(function(item){
			newColor += item + ', ';
		});
		newColor += opacity/100 + ')';

		return newColor;
	}
}

3、正则检测rgba格式是否正确(检测rgb同理)

checkRGBA(rgba){
	let str = rgba.slice(5,rgba.length - 1),
    	arry = str.split(','),
    	status = true,
		reg = /^rgba\(\d{1,3}(\,\s{0,1}\d{1,3}){2}\,\s{0,1}(0|(0(\.\d{1,2}))|1)\)$/;
	
	arry.forEach(function(item,index){
		if(index == arry.length - 1){
			if(Number(item.trim()) < 0 || Number(item.trim()) > 1){
				status = false;
			}
		}else{
			if(Number(item.trim()) < 0 || Number(item.trim()) > 255){
				status = false;
			}
		}
	});
	
	if(reg.test(rgba) && status){
		return true;
	}else{
		return false;
	}
}