Question

（HI）我不是色度学专家，但我想知道如何实现一个生成随机颜色但基于主色的脚本。

可能是随机的Shades或Tints

Ex：＃f25f9a。 http://www.color-hex.com/color/f25f9a

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

所以我需要制作一个随机颜色

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

然后将其转换为十六进制

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

然后根据ColorToHex生成随机色调或着色器或单色它用于插件开发，用于调试精灵的框架。

感谢您的帮助，如果您知道任何片段？。

Answer 1

您可以将单个颜色的增量设置为255作为随机乘法的可变部分。对于非常颜色采用相同的随机值，并以所需格式构建字符串。

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

我不确定这是真的被问到什么（我还不确定被问到的是什么）我几乎可以肯定会让色度测量员生气，但这里有一个懒惰（即非mathy）方式实现类似的东西：

此解决方案使用屏幕外画布绘制渐变，然后从此渐变中提取像素。

＆＃13;

// 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);
  }

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

javascript生成类似的随机颜色（着色器||色调||单色）

3 个答案: