CSS中颜色值rgb与16进制相互转化

1、rgb转换为16进制

				const colorRgbToHex = (rgbStr) => {
			 	 	//十六进制颜色值的正则表达式
			  		const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8}|[0-9a-fA-f]{6}[0-9]{2})$/;
				  	if (reg.test(rgbStr)) {
				    	return rgbStr;
				  	} else {
				   		const rgbArray = rgbStr.replace(/(?:\(|\)|rgba|rgb|RGBA|RGB)*/g,"").split(",");
				    	let strHex = "#";
				  	  	for (let i = 0;i < rgbArray.length; i++) {
					      	if (i !== 3){
					        	if (rgbArray[i] == "0") {
					          		strHex += "00"
						        } else {
						          	let newItem =Number(rgbArray[i]).toString(16)
						        	if (newItem.length < 2){
						            	newItem = "0" + newItem
						        	}
						          	strHex += newItem
						        }
					     	} else {
					        	strHex += rgbArray[i] == "0" ? "" : Number(rgbArray[i]) * 100
					      	}
					    }
					   	return strHex;
				  	}
				}
				let res1 = colorRgbToHex('rgb(255,0,0)');
				console.log(res1)		//#ff0000

2、16进制转换为rgb

				const colorHexToRgb = (hexStr, opacity) => {
				  //rgb颜色值的正则表达式
					const reg = /^(rgba|rgb|RGBA|RGB)\([\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*,[\s]*[0-9]+[\s]*(,[\s]*[0-9.]+[\s]*)*\)$/;
				  	if (reg.test(hexStr)) {
					    return hexStr;
					} else {
					    hexStr = hexStr.toLowerCase()
					    if (hexStr.length === 4) {
					    	letcolorNew = "#";
					    	for (let i = 1; i < 4; i += 1) {
						        conststr = hexStr.slice(i, i + 1);
						        colorNew += str + str;
						    }
						    hexStr = colorNew;
					    }
					    const rgbArray = [];
					    for (let i = 1;i < hexStr.length; i += 2) {
					    	if (i < 7) {
					    		rgbArray.push(parseInt("0x" + hexStr.slice(i, i + 2)));
					    	}
					    	if (i >= 7 && opacity) {
					        	conststr = hexStr.slice(i, i + 2);
					        	rgbArray.push(/^[a-f0-9]{2}$/.test(str) ? parseInt(`0x${str}`) / 255 : (Number(str) / 100).toString())
					      	}
					    }
					    return (opacity ? "rgba(" : "rgb(") + rgbArray.join(",") + ")";
					}
				}
				let res2 = colorHexToRgb('#ff0000');
				console.log(res2)		//rgb(255,0,0)

另外还可以使用prototype原型的方式，给string字符串类型添加方法，用于实现颜色值格式的转换

1、rgb转换为16进制

				String.prototype.colorHex = function () {
				  // RGB颜色值的正则
					var reg = /^(rgb|RGB)/;
					var color = this;
					if (reg.test(color)) {
					var strHex = "#";
					// 把RGB的3个数值变成数组
					var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
					// 转成16进制
					for (var i = 0; i < colorArr.length; i++) {
						var hex = Number(colorArr[i]).toString(16);
						if (hex === "0") {
						  hex += hex;
						}
						strHex += hex;
					}
					return strHex;
				   } else {
					return String(color);
					}
				};
				let res3 = "rgb(0,0,255)".colorHex(); 
				console.log(res3)		//#0000ff

2、16进制转换为rgb

			String.prototype.colorRgb = function () {
			   // 16进制颜色值的正则
			   var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
			   // 把颜色值变成小写
			   var color = this.toLowerCase();
			   if (reg.test(color)) {
					// 如果只有三位的值，需变成六位，如：#fff => #ffffff
					if (color.length === 4) {
						var colorNew = "#";
						for (var i = 1; i < 4; i += 1) {
						  colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
						}
						color = colorNew;
					}
					// 处理六位的颜色值，转为RGB
					var colorChange = [];
					for (var i = 1; i < 7; i += 2) {
						colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
					}
					return "RGB(" + colorChange.join(",") + ")";
				} else {
					return color;
				}
			};
			let res4 = "#00ff00".colorRgb()
			console.log(res4)		//RGB(0,255,0)