javascript - 限制随机颜色生成器函数在 javascript 中生成特定颜色

Question

我使用以下函数生成随机颜色:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

我想限制它生成除“#A9A9A9”之外的所有颜色或所有灰色阴影(如果可能)。

在生成颜色并再次调用函数后放置一些 if 条件似乎效率不高。请建议我该怎么做？

Answer 1

它会稍微限制你的整体色彩空间，但你可以做这样的事情，因为你试图摆脱(真正的)灰色，只有当所有三个 RGB 值彼此相等时才会发生这种情况。

var letters1 = '0123456789ABCDEF'.split('');
var letters2 = '0123456789ABCDEF'.split('');
var color = '#';
var rand1, rand2, i, len = letters1.length;
for (i = 0; i < 3; i += 1) {
    rand1 = Math.floor(Math.random() * (len - i));
    rand2 = Math.floor(Math.random() * (len - i));
    color += letters1.splice(rand1,1) + letters2.splice(rand2,1);
}

或者只使用 HSL 颜色空间可能更聪明:

var color = 'hsl(' + Math.round(Math.random() * 359) + ',100%,50%)';

然后你可以限制你想要的色调范围，并确保 S/L 设置在合理的位置，你最终只会得到颜色，而不是灰色、黑色或白色。 W3 学校有一个很好的 HSL explorer 接受值。如果它必须是 RGB，您可以很容易地将 HSL 转换为 RGB，请查看 https://github.com/Qix-/color-convert。

作为这如何变得更复杂的示例，根据我对绿色停止/开始色调的解释，此函数仅生成非绿色。

randomNonGreenColor = function () {
    //skip green
    var ranges = [[0, 60], [180, 359]];

    //get max random
    var total = 0, i;
    for (i = 0; i < ranges.length; i += 1) {
        total += ranges[i][1]-ranges[i][0] + 1;
    }

    //get random hue index
    var randomHue = Math.floor(Math.random() * total);

    //convert index to actual hue
    var pos = 0;
    for (i = 0; i < ranges.length; i += 1) {
        pos = ranges[i][0];
        if (randomHue + pos <= ranges[i][1]) {
            randomHue += pos;
            break;
        } else {
            randomHue -= (ranges[i][1] - ranges[i][0] + 1);
        }
    }

    return 'hsl(' + randomHue + ',100%,50%)';
}