Conversion RVB en hexadécimal avec Javascript

On va utiliser la fonction Javascript toString() qui permet de convertir un nombre en string en spécifiant un radix optionnel, c'est-à-dire la base numérique utilisée pour la conversion.

Pour plus d'information sur les bases disponibles vous pouvez consulter la documentation ECMAScript.

Pour faire court, sachez qu'on utilise le radix 16 pour convertir en hexadécimal.

var t = 255;
console.log(t.toString(16));
// ff
t = 200;
console.log(t.toString(16));
// c8

Une couleur au format hexadécimal est une série de 6 chiffres / lettres. Nous devons nous assurer d'avoir 6 caractères sinon notre couleur sera fausse. On ne peut pas se contenter d'utiliser toString().

Exemple de mauvaise conversion RVB

function rgb2hex(r, g, b){
	console.log('#'+r.toString(16)+g.toString(16)+b.toString(16));
}
rgb2hex(10, 60, 15);
// #a3cf

Cet exemple donne la valeur #a3cf, alors qu'elle devrait être #0a3c0f.

La bonne méthode

Pour corriger cette erreur, il faut créer un string commençant par un zéro et utiliser la fonction slice() pour conserver les deux derniers caractères. Si toString() renvoi un caractère seul (de 0 à 9, de A à F), un zéro sera ajouté, sinon ça sera transparent.

var t = 7;
console.log(('0'+t.toString(16)).slice(-2));
// 07
t = 12;
console.log(('0'+t.toString(16)).slice(-2));
// 0C
t = 17;
console.log(('0'+t.toString(16)).slice(-2));
// 11

La fonction Javascript de conversion

Le code complet pour convertir une couleur RVB en héxadécimal le est suivant :

function rgb2hex(r, g, b){
	return '#'+('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);
}