Wie konvertiere ich RGB- und Hexadezimalfarben in JS? (Codebeispiel)

Wie konvertiert man RGB- und Hexadezimalfarben ineinander? In diesem Artikel erfahren Sie, wie js die gegenseitige Konvertierung zwischen RGB- und Hexadezimalfarben realisiert, damit jeder das Prinzip der gegenseitigen Konvertierung zwischen RGB- und Hexadezimalfarben verstehen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Um Farben in CSS zu definieren, können Sie RGB-Farbwerte verwenden, zum Beispiel: rgb(182, 0, 35); Sie können auch hexadezimale Farbwerte verwenden, zum Beispiel: #B60023. Unabhängig davon, ob es sich um RGB (182, 0, 35) oder # B60023 handelt, stellen beide die gleiche Farbe dar. Unabhängig von der verwendeten Darstellungsmethode kann es aufgrund der sich ständig ändernden Natur von Webseiten jedoch auch vorkommen seltsam. Manchmal müssen wir RGB- und Hexadezimalfarben konvertieren.

Sehen wir uns ein Beispiel für die Konvertierung von RGB- und Hexadezimalfarben an.

Hexadezimale Farbwerte können in zwei Gruppen unterteilt werden, die RGB von links nach rechts darstellen. Die erste von zwei Hexadezimalzahlen wird mit der Hexadezimalzahl multipliziert und das Ergebnis zur zweiten Zahl addiert, um eine Zahl zwischen 0 und 255 zu erhalten.

Zum Beispiel gibt es einen hexadezimalen Farbwert #B60023, dessen Konvertierung in RGB lautet: R (B6), G (00), B (23). Dann ist Rot: B(11) x 16 + 6 = 182. Grün ist 0, Blau ist: 2 x 16 +3 = 35. Daher lautet das rgb()-Rot, das dem hexadezimalen Farbwert #B60023 entspricht: rgb(182, 0, 35).

Wie kann man also mit JavaScript RGB- und Hexadezimalfarben ineinander und voneinander konvertieren? Mal sehen, wie es geht.

Der Kern der JavaScript-Implementierung der Farbkonvertierung ist die Konvertierung zwischen Basen .

Das RGB-Format ist eigentlich eine dezimale Darstellung, daher ist die Konvertierung zwischen Hexadezimalfarbe und RGB-Farbe die Konvertierung zwischen Hexadezimal und Dezimal.

1. JavaScript implementiert die RGB-Farbkonvertierung in Hexadezimalzahl (Dezimalzahl in Hexadezimalzahl). Der Kerncode lautet wie folgt:

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

Das Ergebnis ist FF .

Erklärung: Der Parameter „16“ in toString bedeutet, dass der Wert in einen hexadezimalen String umgewandelt wird.

RGB-Farbe in Hexadezimal umwandeln

Der Beispielcode lautet wie folgt:

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 implementiert die Konvertierung von Hexadezimalfarbe in RGB-Farbe

Es ist relativ einfach, Hexadezimal in Dezimal umzuwandeln. Der Kerncode lautet wie folgt:

parseInt("0xFF");

Das Ergebnis ist 255

Erklärung: „0x“ bedeutet, dass es derzeit hexadezimal ist, da dort Es gibt keine folgenden parseInt-Parameter, daher wird standardmäßig in eine Dezimalzahl konvertiert.

Hexadezimale Farbe in RGB-Farbe konvertieren

Der Beispielcode lautet wie folgt:

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

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Sie können es selbst ausprobieren. Ich hoffe, dass Sie es können. Es wird für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial

, jQuery-Video-Tutorial, Bootstrap-Tutorial!

Das obige ist der detaillierte Inhalt vonWie konvertiere ich RGB- und Hexadezimalfarben in JS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!