javascript générer une couleur aléatoire similaire (shader || Tint || Monochromatique)

Question

(HI) Je ne suis pas spécialiste en colorimétrie, mais j'aimerais savoir comment réaliser un script qui génère des couleurs aléatoires, mais basé sur une couleur principale .

peut-être les Shades aléatoires ou Teintes

Ex: de # f25f9a. http://www.color-hex.com/color/f25f9a

#f25f9a 
#f36fa4 
#f47eae 
#f58fb8 
#f79fc2 
#f8afcc 
#f9bfd6 
#fbcfe0 
#fcdfea 
#fdeff4 
#ffffff 

donc je besoin de faire une couleur au hasard

function colors() { return ('0x' + Math.floor(Math.random() * 16777215).toString(16) || 0xffffff) }; 

et après le convertir en hexadécimal

function ColorToHex(hexb){return '#'+hexb.slice(2);} 

Générons teinte ou shaders aléatoire ou couleurs monochromatiques sur la base ColorToHex pour un développement de plugin avec des cadres pour le débogage sprite.

Merci pour l'aide, si vous connaissez des extraits.

Answer 1

Vous pouvez prendre le delta d'une seule couleur à 255 comme partie variable pour la multiplication aléatoire. Prenez la même valeur aléatoire pour très couleur et construisez une chaîne dans le format voulu.

function getRandomColor(color) { 
 
    var p = 1, 
 
     temp, 
 
     random = Math.random(), 
 
     result = '#'; 
 

 
    while (p < color.length) { 
 
     temp = parseInt(color.slice(p, p += 2), 16) 
 
     temp += Math.floor((255 - temp) * random); 
 
     result += temp.toString(16).padStart(2, '0'); 
 
    } 
 
    return result; 
 
} 
 

 

 
var color = '#f25f9a', 
 
    i, 
 
    rc; 
 

 
for (i = 0; i < 10; i++) { 
 
    rc = getRandomColor(color); 
 
    document.body.innerHTML += '<div style="background-color: ' + rc + ';">' + rc + '</div>'; 
 
}

Answer 2

let randomColor = Math.ceil((Math.random() * Math.pow(255, 3))).toString(16); 
     while (randomColor.length < 6) { 
     randomColor = '0' + randomColor; 
     } 
     randomColor = '#' + randomColor; 

Answer 3

Je ne suis pas sûr qu'il est vraiment ce qui est demandé (je ne suis toujours pas sûr de ce qui est demandé) et je suis presque sûr que ça va faire les gars en colère colorimétrie, mais voici une façon paresseuse (c'est-à-dire non mathématique) de réaliser quelque chose de similaire:

Cette solution utilise un canevas hors écran pour dessiner un dégradé, puis extrait les pixels de ce dégradé.

// returns an array of CSS color strings 
 
// @from: CSS color string of first color 
 
// @to: CSS color string of last color 
 
// @numberOfShades: number of shades to be returned (from and end included) 
 
function getGradColors(from, to, numberOfShades){ 
 
    // generate a canvas context and store it in cache 
 
    var ctx = getGradColors.ctx || (getGradColors.ctx = document.createElement('canvas').getContext('2d')); 
 
    // set our canvas dimensions according to the number of shades required 
 
    var w = ctx.canvas.width = numberOfShades || 10; 
 
    ctx.canvas.height = 1; 
 
    // create a linear gradient 
 
    // (to keep 'from' and 'to' values, we set its x to 1 and width to width -1) 
 
    var grad = ctx.createLinearGradient(1,0,w-1, 0); 
 
    grad.addColorStop(0, from || 'white'); 
 
    grad.addColorStop(1, to || 'black'); 
 
    ctx.fillStyle = grad; 
 
    ctx.fillRect(0,0,w,1); // draw it 
 
    var data = ctx.getImageData(0,0,w,1); // get the pixels info ([r, g, b, a, r, g...]) 
 
    var colors = []; 
 
    data.data.forEach(function(comp, i){ 
 
    if(i%4===0){ // map each pixel in its own array 
 
     colors.push([]); 
 
     } 
 
    if(i%4===3){ // alpha 
 
     comp /= 255; 
 
     } 
 
    colors[colors.length - 1].push(comp); 
 
    }); 
 
    return colors.map(function(c){ 
 
    // return a CSS computed value 
 
    ctx.fillStyle = 'rgba('+c.join()+')'; 
 
    return ctx.fillStyle; 
 
    }); 
 
    } 
 
    
 
var shadesOfWhite = getGradColors('#f25f9a', 'white', 10); 
 
console.log('to white: ', shadesOfWhite); 
 
shadesOfWhite.forEach(generateSpan); 
 

 
container.appendChild(document.createElement('br')); 
 

 
var shadesOfBlack = getGradColors('#f25f9a', 'black', 10); 
 
console.log('to black: ', shadesOfBlack); 
 
shadesOfBlack.forEach(generateSpan); 
 

 
function generateSpan(color){ 
 
    var span = document.createElement('span'); 
 
    span.style.backgroundColor = color; 
 
    container.appendChild(span); 
 
    }

#container > span{ 
 
    width: 10vw; 
 
    height: 5vw; 
 
    display: inline-block; 
 
    } 
 
body{margin: 0}

<div id="container"></div>