Comment générer une couleur HEX aléatoire en JavaScript ? [Guide facile]

Dans cet article, je vais vous guider dans la création d'une fonction JavaScript qui génère un code couleur hexadécimal aléatoire composé d'un mélange de chiffres et d'alphabets.

Cette fonction génère une couleur hexadécimale aléatoire à chaque exécution :

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. Générer des nombres aléatoires

Dans la première étape, nous devons générer des nombres aléatoires et nous pouvons facilement le faire en utilisant l'objet mathématique JavaScript et la méthode Math random().

Si vous créez une méthode aléatoire normale, elle vous donnera des nombres décimaux aléatoires, voir l'exemple ci-dessous :

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

Mais nous devons générer un nombre aléatoire entre 0 et 16777215, vous vous demandez peut-être pourquoi ai-je besoin de 16777215 au lieu de "999999" ou de tout nombre à six chiffres. Nous devons utiliser ce nombre à huit chiffres car le nombre 16 777 215 est la valeur la plus élevée que vous puissiez avoir avec un code couleur hexadécimal à six chiffres.

Les codes de couleur hexadécimaux utilisent six chiffres, chaque chiffre pouvant aller de 0 à 9 ou de A à F, donnant 16 choix possibles pour chaque chiffre.

Cela signifie que vous pouvez créer un total de 16 777 216 couleurs différentes à six chiffres. Le plus grand code couleur hexadécimal est #FFFFFF, qui correspond à 16 777 215 en décimal.

Ainsi, en utilisant un nombre allant jusqu'à 16 777 215, vous pouvez couvrir toutes les couleurs possibles représentées par un code hexadécimal à six chiffres, y compris celles qui contiennent des caractères alphabétiques. Cela garantit que toutes les couleurs possibles, qu'elles utilisent des chiffres ou des lettres, sont incluses.

N'oubliez pas d'envelopper la méthode Math.random() dans Math.floor() pour vous assurer d'obtenir des nombres entiers et éviter les valeurs décimales.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. Conversion d'un nombre en chaîne hexadécimale

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

Nous devons maintenant convertir le nombre en chaîne hexadécimale, ce qui peut être facilement fait en utilisant la méthode toString(16).

Utilisez simplement la méthode toString(16) sur le nombre aléatoire et transmettez-le 16 comme argument pour le convertir en chaîne hexadécimale.

Cette méthode garantit que le code résultant comprend uniquement des chiffres et des lettres de 0 à F, sans aucun caractère au-delà de F.

Lire aussi : Code de suivi Google Analytics dans Next.js [Guide de configuration]

3. Ajouter la méthode padStart

Notre fonction est presque prête. Cependant, il existe un problème potentiel : parfois, le code couleur hexadécimal généré peut contenir seulement 5 caractères au lieu de 6.

Si la fonction renvoie un code couleur hexadécimal à 5 ​​caractères, il ne sera pas valide. Pour résoudre ce problème et garantir que nous obtenons toujours un code couleur hexadécimal à 6 caractères, nous devons ajouter la méthode padStart au code.

La méthode padStart(6, '0') garantira que le code couleur est toujours un code à 6 chiffres en ajoutant des zéros non significatifs si nécessaire.

Par exemple, si le code hexadécimal est A9A9A et ne contient que cinq caractères, la méthode padStart(6, '0') ajoutera un 0 en tête pour en faire un code couleur à six chiffres, ce qui donnera 0A9A9A. Cela garantit que la fonction renvoie toujours un code couleur hexadécimal correctement formaté avec exactement six caractères.

4. Renvoyez le code hexadécimal généré

La dernière étape consiste à renvoyer le code de couleur hexadécimal aléatoire généré afin qu'il puisse être facilement utilisé partout où cela est nécessaire.

Je souhaite utiliser une chaîne de modèle pour envelopper le code couleur et ajouter # au début, afin de ne pas avoir à ajouter # manuellement à chaque fois que j'utilise cette fonction.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

Conclusion

Lorsque j'ai créé pour la première fois un générateur de couleurs hexadécimales aléatoires en JavaScript, il ne produisait que des couleurs sombres ou ternes car il n'incluait aucun caractère alphabétique.

Après avoir apporté quelques modifications au code, j'ai finalement obtenu le résultat souhaité. J'espère également que cet article vous a fait gagner du temps dans la création d'une fonction similaire.

Partagez cet article avec vos amis qui recherchent un nouveau projet ou souhaitent créer quelque chose en utilisant JavaScript !

Lire aussi : Comment désactiver le code HTML sans le supprimer [3 méthodes]

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!