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>