Konvertieren RGB in HEX in JavaScript
In diesem Tutorial wird erläutert, wie Sie mit der Funktion toString() in JavaScript RGB in HEX konvertieren.
Konvertieren von RGB in HEX mit der Funktion toString() in JavaScript
Die Konvertierung zwischen verschiedenen Farbräumen ist in JavaScript schwierig, da in JavaScript keine vordefinierte Funktion vorhanden ist, die zwischen verschiedenen Farbräumen konvertieren kann.
Wir müssen also unsere eigene Konvertierungsfunktion erstellen, um einen Farbraum in einen anderen umzuwandeln. Um eine Konvertierungsfunktion zu erstellen, müssen wir den Unterschied zwischen den beiden Farbräumen kennen.
Der Unterschied zwischen dem RGB- und HEX-Farbraum besteht beispielsweise darin, dass RGB im Dezimalformat und HEX im Hexadezimalformat vorliegt. Um von RGB in HEX zu konvertieren, müssen wir nur die Dezimalzahl jeder Farbe von RGB in hexadezimal konvertieren und sie dann miteinander verketten, um den entsprechenden Hex-Farbraum zu erstellen.
Um einen Wert von dezimal in hexadezimal zu ändern, können wir die Funktion toString(16) verwenden. Wenn die Länge der konvertierten Zahl 1 ist, müssen wir davor eine 0 hinzufügen. Siehe den Code unten.
function ColorToHex(color) {
var hexadecimal = color.toString(16);
return hexadecimal.length == 1 ? '0' + hexadecimal : hexadecimal;
}
function ConvertRGBtoHex(red, green, blue) {
return '#' + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}
console.log(ConvertRGBtoHex(255, 100, 200));
Ausgabe:
#ff64c8
Wir können auch mit der Funktion parseInt() von HEX in RGB konvertieren. Ein HEX-Farbraum enthält 6 Ziffern, außer der ersten Ziffer. Wir müssen die ersten 2 Ziffern erhalten und sie mit der Funktion parseInt() in das Dezimalformat konvertieren, was unsere rote Farbe sein wird. Ebenso geben uns die nächsten beiden Ziffern die grüne Farbe und die verbleibenden geben uns die blaue Farbe.
Lassen Sie uns zum Beispiel die HEX-Farbe mit der Funktion parseInt() in RGB umwandeln. Siehe den Code unten.
var hex = '#ff64c8';
var red = parseInt(hex[1] + hex[2], 16);
var green = parseInt(hex[3] + hex[4], 16);
var blue = parseInt(hex[5] + hex[6], 16);
console.log(red, green, blue);
Ausgabe:
255 100 200
Sie können auch mit dem obigen Code eine Funktion erstellen, damit Sie den Code nicht erneut schreiben müssen. Ebenso können Sie jeden Farbraum in einen anderen umwandeln; Sie müssen nur den Unterschied zwischen verschiedenen Farbräumen verstehen.
