Comment convertir les couleurs RVB et hexadécimales en js ? (exemple de code)

Comment convertir les couleurs RVB et hexadécimales entre elles ? Cet article vous présentera comment js réalise la conversion mutuelle entre les couleurs RVB et hexadécimales, afin que chacun puisse comprendre le principe de la conversion mutuelle entre les couleurs RVB et hexadécimales. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Pour définir les couleurs en CSS, vous pouvez utiliser des valeurs de couleur rgb, par exemple : rgb(182, 0, 35) ; vous pouvez également utiliser des valeurs de couleur hexadécimales, par exemple : #B60023. Qu'il s'agisse de rgb(182, 0, 35) ou #B60023, les deux représentent la même couleur. En fait, quelle que soit la méthode d'expression utilisée, mais en raison de la nature toujours changeante des pages Web, les situations rencontrées peuvent également être différentes. étrange. Parfois, nous devons convertir les couleurs RVB et hexadécimales.

Jetons un coup d'œil à un exemple de conversion des couleurs RVB et hexadécimales.

Pour les valeurs de couleur hexadécimales, elles peuvent être divisées en deux groupes, représentant RVB de gauche à droite. Le premier des deux nombres hexadécimaux est multiplié par hexadécimal et le résultat est ajouté au deuxième nombre pour obtenir un nombre compris entre 0 et 255.

Par exemple, il existe une valeur de couleur hexadécimale #B60023, la convertir en RVB est : R (B6), V (00), B (23). Alors le rouge vaut : B(11) x 16 + 6 = 182. Le vert vaut 0, le bleu vaut : 2 x 16 +3 = 35. Par conséquent, le rouge rgb() correspondant à la valeur de couleur hexadécimale #B60023 est : rgb(182, 0, 35).

Alors, comment utiliser JavaScript pour convertir les couleurs RVB et hexadécimales les unes vers les autres ? Voyons comment procéder.

Le cœur de l'implémentation JavaScript de la conversion des couleurs est la conversion entre les bases .

Le format RVB est en fait une représentation décimale, donc la conversion entre la couleur hexadécimale et la couleur RVB est la conversion entre l'hexadécimal et le décimal.

1. JavaScript implémente la conversion des couleurs RVB en hexadécimal (décimal en hexadécimal)

Convertissez le décimal en hexadécimal, le code de base est le suivant :

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

Le résultat est F.F.

Explication : Le paramètre "16" dans toString signifie que la valeur est convertie en chaîne hexadécimale.

Convertir la couleur RVB en hexadécimal L'exemple de code est le suivant :

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 implémente la conversion de la couleur hexadécimale en couleur RVB

.

Il est relativement facile de convertir l'hexadécimal en décimal. Le code de base est le suivant :

parseInt("0xFF");

Le résultat est 255

Remarque : "0x" indique qu'il est actuellement en décimal. hexadécimal Puisqu’il n’y a aucun paramètre derrière parseInt, la valeur par défaut est de convertir en décimal.

Convertir la couleur hexadécimale en couleur RVB L'exemple de code est le suivant :

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;	
	}
};

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, vous pouvez l'essayer vous-même, j'espère que cela sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript, le Tutoriel vidéo jQuery, le Tutoriel bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!