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

Question

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

也许是随机阴影或浅色调

例如：＃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

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

Answer 3

我不知道这是真的问什么（我仍然不知道问什么），我几乎可以肯定它会让比色法家伙生气，但这是一种懒惰（即非马屁精）的方式来实现类似的效果：

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

// 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>