(HI) I am not a specialist in colorimetry, but I would like to know how to realize a script that generates random colors, but based on a master color.

maybe the random Shades or Tints

Ex:of #f25f9a.

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

so i need to make a random color

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

and after that convert it to hex

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

then generate random tint or shader or Monochromatic Colors based on the ColorToHex it for a plugin developement with frames for debugging sprite.

thank for help , if you know any snippets?.

(HI) I am not a specialist in colorimetry, but I would like to know how to realize a script that generates random colors, but based on a master color.

maybe the random Shades or Tints

Ex:of #f25f9a. http://www.color-hex./color/f25f9a

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

so i need to make a random color

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

and after that convert it to hex

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

then generate random tint or shader or Monochromatic Colors based on the ColorToHex it for a plugin developement with frames for debugging sprite.

thank for help , if you know any snippets?.

• javascript
• random
• colors
• shader
• code-snippets

• Your chosen colors look like a linear-gradient from #color to white, is this what you want? – Kaiido Commented Oct 11, 2017 at 7:21
• yes sorry i forgot the link, here good example : color-hex./color/f25f9a. – jon Commented Oct 11, 2017 at 7:24
• Colors are points in 3D space. If you want to generate random "similar" colors, choose random points in 3D space that are (a) nearby a given point, (b) colinear with that point on some line in some coordinate system. – Lee Daniel Crocker Commented Oct 11, 2017 at 17:54

3 Answers 3

You could take the delta of a single color to 255 as variable part for random multiplication. Take the same random value for every color and build a string in the wanted format.

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>';
}

I'm not sure it is really what is being asked (I'm still not sure what is being asked) and I'm almost sure it will make colorimetry guys angry, but here is a lazy (i.e non-mathy) way to achieve something similar:

This solution uses an offscreen canvas to draw a gradient, and then extract the pixels from this gradient.

// 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(p, i){
    if(i%4===0){ // map each pixel in its own array
      colors.push([]);
      }
    if(i%4===3){ // alpha
      p /= 255;
      }
    colors[colors.length - 1].push(p);
    });
  return colors.map(function(c){
    // return a CSS puted 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>

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