Convertir RVB en HEX en JavaScript
Ce tutoriel expliquera comment convertir RVB en HEX à l’aide de la fonction toString() en JavaScript.
Convertir RVB en HEX à l’aide de la fonction toString() en JavaScript
La conversion entre différents espaces colorimétriques est difficile en JavaScript car il n’y a pas de fonction prédéfinie présente dans JavaScript, qui peut convertir entre différents espaces colorimétriques.
Nous devons donc créer notre propre fonction de conversion pour convertir un espace colorimétrique en un autre. Pour faire une fonction de conversion, nous devons connaître la différence entre les deux espaces colorimétriques.
Par exemple, la différence entre l’espace colorimétrique RVB et HEX est que le RVB est au format décimal et que le HEX est au format hexadécimal. Pour convertir de RVB en HEX, il suffit de convertir le nombre décimal de chaque couleur de RVB en hexadécimal, puis de les concaténer pour créer l’espace colorimétrique hexadécimal équivalent.
Pour changer une valeur de décimal en hexadécimal, nous pouvons utiliser la fonction toString(16). Si la longueur du nombre converti est 1, nous devons ajouter un 0 avant celui-ci. Voir le code ci-dessous.
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));
Production:
#ff64c8
Nous pouvons également convertir de HEX en RVB en utilisant la fonction parseInt(). Un espace couleur HEX contient 6 chiffres, à l’exclusion du premier chiffre. Nous devons récupérer les 2 premiers chiffres et les convertir au format décimal à l’aide de la fonction parseInt(), qui sera notre couleur rouge. De même, les deux chiffres suivants nous donneront la couleur verte et les autres nous donneront la couleur bleue.
Par exemple, convertissons la couleur HEX en RVB en utilisant la fonction parseInt(). Voir le code ci-dessous.
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);
Production:
255 100 200
Vous pouvez également créer une fonction en utilisant le code ci-dessus afin de ne pas avoir à réécrire le code. De même, vous pouvez convertir n’importe quel espace colorimétrique en un autre ; il vous suffit de comprendre la différence entre les différents espaces colorimétriques.
