web-dev-qa-db-fra.com

Comment générer une couleur pastel (ou plus lumineuse) aléatoire en Javascript?

Je construis un site Web simple qui donne un devis aléatoire lorsque je clique sur un bouton, et avec cela, la couleur d'arrière-plan change. Le fait est que parfois la couleur d'arrière-plan est trop sombre et la police est noire, et par conséquent la personne ne peut pas lire la citation.

Ma question:

Existe-t-il un moyen de créer un code de couleur aléatoire en utilisant juste couleurs vives, ou couleurs pastel?

J'ai obtenu ce code pour générer une couleur aléatoire. J'ai essayé de modifier pour obtenir uniquement les chaînes A à F mais sans succès:

'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

Merci beaucoup d'avance.

javascriptcssrandomcolorsrgb
13
Zzeks

L'utilisation des couleurs HSL peut être la plus simple. Les valeurs de couleur HSL sont spécifiées dans CSS comme

hsl( hue, saturation%, lightness%)

où hue est compris entre 0 et 360 degrés sans marqueur d'unité et saturation et lightness sont des pourcentages avec un _ % signe.

Remarque

  • toutes les couleurs "lumineuses" ont une valeur de saturation de 100% et une valeur de luminosité de 50%:

    teinte 0 ▶ HSL saturated color circle ◀ teinte 360

  • Toutes les couleurs se mélangent au blanc - et deviennent plus "pastel" à mesure que la légèreté augmente. Une valeur de luminosité de 100% crée du blanc quelles que soient les valeurs de teinte et de saturation.

  • Toutes les couleurs se confondent avec le gris lorsque la saturation - diminue et deviennent plus "beiges" ou "gris" selon le niveau de saturation.

  • Toutes les couleurs se mélangent au noir lorsque la légèreté diminue. Une valeur de luminosité de 0% crée du noir, quelles que soient les valeurs de teinte et de saturation.

Exemple: quelques couleurs pastel aléatoires avec saturation dans la plage 25-95% et légèreté dans la plage 85-95%:

function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}
34
traktor53

En randomisant uniquement la teinte, c'est plus rapide.

HSLA les couleurs sont faites de Teinte, saturation, légèreté et alpha.

Exemple, légèreté à régler au besoin (troisième valeur).

function randomHSL(){
    return "hsla(" + ~~(360 * Math.random()) + "," +
                    "70%,"+
                    "80%,1)"
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()
<button id="rdm">Random pastel color!</button>

Ou similaire:

function randomHSL(){
    return `hsla(${~~(360 * Math.random())},70%,70%,0.8)`
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()
<button id="rdm">Random pastel color!</button>
4
NVRM

Vous pouvez choisir parmi des couleurs plus claires en définissant correctement la propriété background-color à l'aide de rgb.
rgb (0,0,0) est noir, tandis que rgb (255,255,255) est blanc. Vous pouvez donc utiliser des valeurs aléatoires plus proches (mais pas supérieures à) 255.
Un exemple (en utilisant JQuery):

 var Rand = Math.floor(Math.random() * 10);
 var colorQ = "rgb(" + (215 - Rand * 3) + "," + (185 - Rand * 5) + "," + (185 - Rand * 10) + " )"; 
 $("body").css("background-color", colorQ);

Vous pouvez jouer avec les valeurs jusqu'à ce que vous trouviez les couleurs que vous préférez - gardez à l'esprit que plus les 3 valeurs RVB sont proches les unes des autres, plus votre couleur sera proche du gris. Par exemple. rgb (100,100,100), rgb (221,221,221) et rgb (133,133,133) sont tous des nuances de gris. Ce qui change, c'est la luminosité de votre gris.

1
Bob