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

我想限制它生成所有期望的颜色＆＃34;＃A9A9A9＆＃34;或所有灰色阴影（如果可能）。

在生成颜色和再次调用函数后设置一些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%)';
}

限制随机颜色生成器功能以在javascript中生成特定颜色

1 个答案: