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 生成随机色调或着色器或单色它用于带有框架的插件开发，用于调试 Sprite 。

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

Answer 1

你可以把单一颜色的delta到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>';
}