【前端】Hex和Rgb颜色的区别，互相转换方法

前端开发用到的色彩很丰富，随着web2.0的高度发展，web3.0的出现，颜色分的越来越细，种类越来越多，我们看到的显示屏的颜色更加接近与生活色彩，不再是传统的红黄绿。今天就来学习一下代码中表达颜色的2种方法：hex和rgb。

RGB - 红绿蓝三原色

RGB色彩的混色原理-加法混色，如同调制乳胶漆一般，像白漆里面添加红绿蓝色彩，一番搅拌，就成了不同的颜色！写法：rgb(R,G,B) - RGB分别是0-255的数值
 

HEX - 16进制色彩

HEX色彩是以16进制数表示红绿蓝的方式，且需以“#”开头，后面跟3位或6位数字+【A-F]组合。写法：#123 ，#F13DC5
 

二者区别

1.进制不同：RGB的数字是10进制，HEX是16进制的
2.写法不同：RGB写法rgb(R,G,B)，HEX写法#F13DC5
3.透明色：RGB色彩可以扩展为rgba，最后的a用了表示颜色透明度，HEX写法不支持透明度
 

手写Hex和Rgb互相转换方法

在上面我们学习了二者的区别：所以完全可以手写函数实现二者互相转换。代码如下：

Hex==> RGB 

/* HexToRgb
  * 参数： strhex —— 字符串：#123 | #112233
  * 返回值： rgb —— 字符串：rgb(17,34,51)
  * */
 function HexToRGB(strhex){
 	let rgb = ""
 	if(strhex.indexOf("#")>-1){
 		strhex = strhex.replace("#","")
 	}
 	//3位转6位
 	if(strhex.length == 3){
 		strhex = strhex.split("").map(item=>{
 			return item+item
 		}).join("")
 	}
 	//rgb分割转16进制
 	if(strhex.length == 6){
 		let hexArr = strhex.split("")
 		let Numlist = {"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"A":10,"B":11,"C":12,"D":13,"E":14,"F":15}
 		let r = Numlist[hexArr[0]]*16 + Numlist[hexArr[1]]
 		let g = Numlist[hexArr[2]]*16 + Numlist[hexArr[3]] 
 		let b = Numlist[hexArr[4]]*16 + Numlist[hexArr[5]]
 		rgb = `rgb(${r},${g},${b})`
 	}
 	return rgb
 }

RGB ==> Hex

 /* RGBToHex
  * 参数： strRGB —— 字符串：rgb(17,34,51)   
  * 返回值： hex —— 字符串：#112233
  * */
 function RGBToHex(strRGB){
 	let hex = ""
 	if(strRGB){
 		strRGB = strRGB.replace("rgb(","")
 		strRGB = strRGB.replace(")","")
 		let rgbArr = strRGB.split(",")
 		if(Array.isArray(rgbArr) && rgbArr.length == 3){
 			let r1 = Math.trunc(rgbArr[0] / 16).toString(16).toUpperCase()
 			let r2 = ( rgbArr[0] % 16 ).toString(16).toUpperCase()
 			let g1 = Math.trunc(rgbArr[1] / 16).toString(16).toUpperCase() 
 			let g2 = ( rgbArr[1] % 16 ).toString(16).toUpperCase() 
 			let b1 = Math.trunc(rgbArr[2] / 16).toString(16).toUpperCase() 
 			let b2 = ( rgbArr[2] % 16 ).toString(16).toUpperCase() 
 			hex = `#${r1}${r2}${g1}${g2}${b1}${b2}`
 		}
 	}
 	return hex
}

测试

 let rgb = HexToRGB("#FA450F")
 console.log(rgb) //rgb(250,69,15)
 let hex = RGBToHex(rgb)
 console.log(hex) // #FA450F

这样就完成rgb和hex之间的相互转换了。除了这两种传统的色彩表达方式，目前CSS还扩展了HSL - 色相、饱和度、亮度  | HWB - 色相、白色浓度、黑色浓度 |  LAB - 亮度 、分量 、分量 | LCH 亮度、饱和度和色相 ，这样就完了？估计后续还会出其他表示颜色的方式，对现代浏览器和屏幕来说已经够用。有兴趣的可以学习研究一下余下来的几种色彩方式。我是七娃，爱学习爱分享！