Couleur aléatoire HTML CSS Javascript

Couleur ou couleur de fond aléatoire (color ou background-color)

Cela permet de choisir aléatoirement la couleur ou la couleur de fond d’un élément parmi une présélection de couleurs. Une couleur sera sélectionnée au hasard à chaque affichage de la page. Fonctionne avec un identifiant class (“.”) ou id (“#”).

JS

var colors = ['#C44C51','#8CC6D7','#FFDA8C','#006D80','#BDA44D','#3C2000'];

var random_color = colors[Math.floor(Math.random() * colors.length)];

$('#bloc').css('background-color', random_color);

Pour modifier la couleur (color) remplacez la dernière ligne par :

$('#bloc').css('color', random_color);

HTML

<div id="bloc">

<p>Hello</p>

</div>

Pour plusieurs éléments

Exemple: un élément ‘class’ et un ‘id’.

JS

var colors = ['#C44C51','#8CC6D7','#FFDA8C','#006D80','#BDA44D','#3C2000'];

var colorsz = ['#556627','#8FCF3C','#FF5B2B','#B1221C','#FF483D','#FC7F3C'];

var random_color = colors[Math.floor(Math.random() * colors.length)];

var random_colorz = colorsz[Math.floor(Math.random() * colors.length)];

$('#bloc').css('background-color', random_color);

$('.exemple').css('background-color', random_colorz);

HTML

<div class="exemple">

<div id="bloc">

<p>Hello</p>

</div>

</div>

Voilà !