How to convert rgb and hexadecimal colors in js? (code example)

How to convert rgb and hexadecimal colors to each other? This article will introduce to you how js realizes the mutual conversion between rgb and hexadecimal colors, so that everyone can understand the principle of mutual conversion between rgb and hexadecimal colors. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When defining colors in CSS, you can use rgb color values, for example: rgb(182, 0, 35); you can also use hexadecimal color values, for example: #B60023. Whether it is rgb(182, 0, 35) or #B60023, both represent the same color. In fact, no matter which expression method is used, but due to the ever-changing nature of web pages, the situations encountered may also be strange. Sometimes we You need to convert rgb and hexadecimal colors.

Let’s take a look at an example of how to convert rgb and hexadecimal colors.

For hexadecimal color values, they can be divided into two groups, representing RGB from left to right. The first of two hexadecimal numbers is multiplied by hexadecimal, and the result is added to the second number to get a number between 0 and 255.

For example, there is a hexadecimal color value #B60023, converting it to RGB is: R (B6), G (00), B (23). Then red is: B(11) x 16 6 = 182. Green is 0, blue is: 2 x 16 3 = 35. Therefore, the rgb() red corresponding to the hexadecimal color value #B60023 is: rgb(182, 0, 35).

So how to use JavaScript to convert rgb and hexadecimal colors to and from each other? Let's see how to do it.

JavaScript implementationThe core of color conversion is the conversion between bases.

RGB format is actually decimal representation, so the conversion between hexadecimal color and RGB color is the conversion between hexadecimal and decimal.

1. JavaScript implements RGB color conversion to hexadecimal (decimal to hexadecimal)

Convert decimal to hexadecimal, the core code is as follows:

var num=255; 
num.toString(16);

Others The result is FF.

Explanation: The parameter "16" in toString indicates that the value is converted into a hexadecimal string.

Convert rgb color to hexadecimal The example code is as follows:

var sRgb = "RGB(23, 245, 56)";
var sHexColor = sRgb.colorHex(); //colorHex()表示转换为十六进制方法

//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

/*RGB颜色转换为16进制*/
String.prototype.colorHex = function(){
	var that = this;
	if(/^(rgb|RGB)/.test(that)){
		var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
		var strHex = "#";
		for(var i=0; i<aColor.length; i++){
			var hex = Number(aColor[i]).toString(16);
			if(hex === "0"){
				hex += hex;	
			}
			strHex += hex;
		}
		if(strHex.length !== 7){
			strHex = that;	
		}
		return strHex;
	}else if(reg.test(that)){
		var aNum = that.replace(/#/,"").split("");
		if(aNum.length === 6){
			return that;	
		}else if(aNum.length === 3){
			var numHex = "#";
			for(var i=0; i<aNum.length; i+=1){
				numHex += (aNum[i]+aNum[i]);
			}
			return numHex;
		}
	}else{
		return that;	
	}
};

2. JavaScript implements conversion of hexadecimal color to rgb color

It is relatively easy to convert hexadecimal to decimal. The core code is as follows:

parseInt("0xFF");

The result is 255

Explanation: "0x" indicates that the current system is hexadecimal. Since there is no following parseInt parameters, so the default is to convert to decimal.

Convert hexadecimal color to rgb color The example code is as follows:

var sHex = "#34538b";
var sRgbColor = sHex.colorRgb();//colorRgb()表示转为RGB颜色值的方法

//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

/*16进制颜色转为RGB格式*/
String.prototype.colorRgb = function(){
	var sColor = this.toLowerCase();
	if(sColor && reg.test(sColor)){
		if(sColor.length === 4){
			var sColorNew = "#";
			for(var i=1; i<4; i+=1){
				sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));	
			}
			sColor = sColorNew;
		}
		//处理六位的颜色值
		var sColorChange = [];
		for(var i=1; i<7; i+=2){
			sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));	
		}
		return "RGB(" + sColorChange.join(",") + ")";
	}else{
		return sColor;	
	}
};

Summary: The above is the entire content of this article. You can try it yourself. I hope you can It will be helpful to everyone’s study. For more related tutorials, please visit JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial!

The above is the detailed content of How to convert rgb and hexadecimal colors in js? (code example). For more information, please follow other related articles on the PHP Chinese website!