Question

几天前，我开始搜索生成随机颜色的JavaScript函数。

我找到了一个脚本并对我自己进行了一些更改：

function getRandColor(brightness)
{
    //6 levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})    
    var rgb = mixedrgb[2] | (mixedrgb[1] << 8) | (mixedrgb[0]  << 16);
    return  '#' + rgb.toString(16);
}

我想在函数中添加对比度参数。怎么办呢？

此外，如果您认为有更快的方法进行计算，请分享。感谢。

经过大量的搜索和测试（因为我在这个颜色的东西非常糟糕）我做了一个函数将hsl转换为十六进制颜色。我正在使用hsl，因为很容易使用hsl属性来制作你想要的颜色。

功能非常糟糕和丑陋，所以帮助我做得更好。例如，随机函数即使在100次调用中也会返回重复值。

  function RandomValue(MinValue,MaxValue)
{
    return parseInt(Math.random()*(MaxValue-MinValue+1), 10)+MinValue;
}

function GetRandomColor()
{
    var h = RandomValue(1, 360);   // color hue between 1 and 360
    var s = RandomValue(20, 100);  // saturation 0-100%
    var l = RandomValue(50, 70);   // lightness  0-70%

    /* Convert the HSL values to HEX */

    return HSLtoRGB(h, s, l);
}

function HSLtoRGB(h, s, v)
{
    var r, g, b;
    var i;
    var f, p, q, t;

    h = Math.max(0, Math.min(360, h));
    s = Math.max(0, Math.min(100, s));
    v = Math.max(0, Math.min(100, v));

    s /= 100;
    v /= 100;

    if(s == 0) 
    {
        r = g = b = v;
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    h /= 60; 
    i = Math.floor(h);
    f = h - i; 
    p = v * (1 - s);
    q = v * (1 - s * f);
    t = v * (1 - s * (1 - f));

    switch(i) 
    {
        case 0:
        r = v;
        g = t;
        b = p;
        break;

        case 1:
        r = q;
        g = v;
        b = p;
        break;

        case 2:
        r = p;
        g = v;
        b = t;
        break;

        case 3:
        r = p;
        g = q;
        b = v;
        break;

        case 4:
        r = t;
        g = p;
        b = v;
        break;

        default: 
        r = v;
        g = p;
        b = q;
    }

    var rgb = Math.round(b * 255) | (Math.round(g * 255) << 8) | (Math.round(r * 255)  << 16);

    var m=rgb.toString(16);

    switch(m.length)
    {
        case 5:return  '#' + rgb.toString(16) + '0';break;
        case 4:return  '#' + rgb.toString(16) + '00';break;
        default:return  '#' + rgb.toString(16);break;
    }
}


for (var i = 0; i < 500; i++) {
    var div = document.createElement('div');
    div.style.backgroundColor = GetRandomColor() ;
    document.body.appendChild(div);
}

Javascript - 随机颜色功能（控制亮度和对比度）

0 个答案: