Question

我一直在阅读有关如何在JS / JQuery中生成随机颜色的问题。但是我想生成只有黑色，黄色和灰色范围颜色的暗色，以便能够在谷歌地图中绘制不同颜色的区域。

由于

Answer 1

var hue = Math.floor(Math.random() * 360),
    saturation =  Math.floor(Math.random() * 100),
    lightness =  Math.floor(Math.random() * 50),
    color = "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";

那就是生成一个随机的hsl颜色。但是如果你想让现有的rgb颜色变暗，最好的办法是将它转换为hsl，然后根据你的需要设置亮度值。享受这些功能：

function rgbToHsl(r, g, b) {
    var maxRGB = Math.max(r, g, b),
        minRGB = Math.min(r, g, b),
        tmp, h, s, l;
    tmp = maxRGB - minRGB;
    l = (maxRGB + minRGB)/255;
    if (tmp) {
        s = Math.round(tmp/(l < 1 ? l : 2 - l))/255;
        if (r === maxRGB) h = (g - b)/tmp;
        else if (g === maxRGB) h = 2 + (b - r)/tmp;
        else h = 4 + (r - g)/tmp;
        h = (h < 0 ? h + 6 : h)*60 % 360;
    } else h = s = 0;
    l /= 2;
    return [h, s, l];
}
function hslToRgb(h, s, l) {
    if (!s) return r = g = b = l*255;
    var q = l < .5 ? l*(1 + s) : l + s - l*s,
        p = 2*l - q;

    for (var i = 120, t, c = []; i >= -120; i -= 120) {
        t = h + i;
        if (t < 0) t += 360;
        else if (t >= 360) t -= 360;
        if (t < 60) c.push(p + (q - p)*t/60);
        else if (t < 180) c.push(q);
        else if (t < 240) c.push(p + (q - p)*(240 - t)/60);
        else c.push(p);
    }
    return [c[0]*255, c[1]*255, c[2]*255];
}

此处，s和l的范围从0到1，r，g和b来自{{ 1}} 0和255从h到0。

Answer 2

首先定义做想要的RGB范围，一旦有了这些定义，只需在这些范围内生成随机值。或者定义你不想要的范围并保持循环，直到找到符合这些标准的颜色，效率低得多，但如果效率不是问题，则编程要容易得多。

Answer 3

问题出在哪里？只需生成3个随机数，可能在30到150之间的范围内，因此您只能得到R，G和B的相对较低的值，并阻止＆＃34;黑色的＆＃34;颜色。然后你只需要检查这三个值是否属于你定义的黑名单颜色范围的范围，如黄色或灰色。

Answer 4

根据jj __？

的评论中的duplicate

function getGMapRandomColor() {
    return 'hsla(' + Math.floor(Math.random()*360) + ', 100%, 70%, 1)';
}

Answer 5

为了简化实现和彻底性，我不能足够推荐这个脚本：

David Merfeld's randomColor

在hex或rgb之间选择，添加一些alpha，指定浅色或深色调色板，避免重复等。

如何生成只在javascript中变暗颜色的随机颜色？

5 个答案: