如何获得随机光色[重复]

Posted 2023-02-23

【中文标题】如何获得随机光色[重复]

【英文标题】：How to get random light color [duplicate]

【发布时间】：2015-06-12 01:07:42

【问题描述】：

我想用 javascript随机生成颜色十六进制代码。这种颜色需要足够浅才能在其上放置黑色字体。

确保生成浅色的最佳方法是什么？在以下函数中限制letters会有所帮助吗？

function getRandomColor() 
    var letters = '0123456789ABCDEF'.split(''),
        color = '#';
    for(var i = 0; i < 6; i++ ) 
        color += letters[Math.floor(Math.random() * 16)];
    
    return color;

【问题讨论】：

限制为字母只会确保您拥有有效的颜色代码，与亮度无关。提示：颜色的明度是所有颜色通道值的总和。

使用具有固定饱和度和亮度以及随机色调的 hsl()。这些答案中的十六进制值是什么？我们不再是 1990 年代了：p

【参考方案1】：

This stack answer 似乎对你有好处。一个这样的答案使用：

var randomColor = (function lol(m, s, c) 
    return s[m.floor(m.random() * s.length)] +
        (c && lol(m, s, c - 1));
)(Math, '3456789ABCDEF', 4);

JS Fiddle 来自上面的答案。

编辑： 更改此行以更改您希望随机颜色的亮/暗程度（更改为 ABCDEF 会使它们更亮）：

)(Math, '3456789ABCDEF', 4);

【讨论】：

正是我想要的。想知道为什么我在询问之前没有找到那个帖子......谢谢！

【参考方案2】：

如果您可以忽略 IE8 及以下版本，则可以通过随机更改色调并将饱和度设置为 50% 并将光分量设置为 75%，在 hsl 中获得随机的“浅色”颜色。

var lightColor='hsl('+Math.floor(Math.random()*361)+',50%,75%)';

var lightColor= 'hsl('+Math.floor(Math.random()*361)+',50%,75%)';

如果旧版浏览器需要，您可以将 hsl 颜色（足够接近）转换为 rgb-

function hslToRgb(hsl)
    if(typeof hsl== 'string')
        hsl= hsl.match(/(\d+(\.\d+)?)/g);
    
    var sub, h= hsl[0]/360, s= hsl[1]/100, l= hsl[2]/100, 
    t1, t2, t3, rgb, val;
    if(s== 0)
        val= Math.round(l*255).minmax(0, 255);
        rgb= [val, val, val];
    
    else
        if(l<0.5)   t2= l*(1 + s);
        else t2= l + s - l*s;
        t1= 2*l - t2;
        rgb= [0, 0, 0];
        for(var i= 0; i<3; i++)
            t3= h + 1/3*-(i - 1);
            t3<0 && t3++;
            t3>1 && t3--;
            if(6*t3<1) val= t1 +(t2 - t1)*6*t3;
            else if(2*t3<1) val= t2;
            else if(3*t3<2) val= t1 +(t2 - t1)*(2/3 - t3)*6;
            else val= t1;
            rgb[i]= Math.round(val*255).minmax(0, 255);
        
    
    return 'rgb('+rgb.join(',')+')';

lightColor+'~= '+hslToRgb(lightColor);

/* 返回值：（字符串） hsl(88,50%,75%)~= rgb(193,223,159) */