JavaScript：生成随机漂亮饱和度颜色（选择调色板）

Question

我看到很多JS示例，但没有一个符合我的需要:

我想要一个脚本来生成颜色，但如果我使用常见的解决方案

color =  '#'+Math.floor(Math.random()*16777215).toString(16);

它生成了柔和的颜色，但我更喜欢更饱和的颜色...或者更有野心地说，我如何选择调色板来挑选颜色？

我如何“限制”随机性？

- Francesco

---

使用HSL颜色，饱和度保持在85以上，然后旋转色相轮即可。类似问题 - c69

但那是在Python中... 那JavaScript呢？ - Francesco

document.body.style.backgroundColor = 'hsl(' + Math.floor( 360 * Math.random() ) + ', 85%, 55%)'; - c69

Answer 1

要使用完全饱和的颜色，请使用HSL颜色空间，其中H为0-360，S为100％（或略低于），L为50％。

如果您知道浏览器支持CSS3，则可以直接使用它。如果不行，可以使用HSL转RGB算法（大约20行代码），该算法可通过Google轻松获取并转换为十六进制格式。

HSL转RGB的公式也在维基百科上的HSL页面中，很容易翻译成Javascript（以及其他大多数语言！）

- Alnitak

---

如果我必须通过谷歌搜索问题，那么使用stackoverflow.com的意义何在？ - Francesco

@FrancescoBertelli 我并没有让你去谷歌搜索问题，我（实际上）是让你谷歌搜索“hsl to rgb javascript”。在这里提问得到了HSL提示，而在谷歌上搜索将会得到所需的代码。 - Alnitak

Answer 2

你可以将颜色字符串值转换为hsl。

在数学上，hsl是最容易操作的值。

在hsl颜色三元组中，第一项是圆形的“色调”，以度数表示（0-360），

第二个是色调的“饱和度”（0-100％），最后一个是“亮度”（0-100％）。

任何亮度为0的颜色都是黑色。如果亮度为100，则为白色。

您可以通过改变色调来旋转颜色。

改变饱和度或亮度会使颜色更丰富、苍白、轻或暗。

(function(){
    String.prototype.padZero= function(len, c){
        var s= this, c= c || '0', len= len || 2;
        while(s.length< len) s= c+ s;
        return s;
    }
    window.Color= function(c){
        if(!(this instanceof Color)) return new Color(c);
        var h= Color.getHex(c);
        if(h){
            this.hex= h;
            this.rgb= Color.hexToRgb(h);
            this.hsl= Color.rgbToHsl(this.rgb);
            this.isgray= this.hsl[1]=== 0;
        }
    }
    var CC={
        colornames:{
            aqua:'#00ffff', black:'#000000', blue:'#0000ff', fuchsia:'#ff00ff',
            gray:'#808080', green:'#008000', lime:'#00ff00', maroon:'#800000',
            navy:'#000080', olive:'#808000', orange:'#ffa500', purple:'#800080',
            red:'#ff0000', silver:'#c0c0c0', teal:'#008080', white:'#ffffff',
            yellow:'#ffff00'
        },
        getHex: function(c){
            if(c instanceof Color) return c.hex;
            if(typeof c== 'string'){
                c= c.toLowerCase();
                if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
                    if(c.length== 4){
                        return '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
                    }
                    return c;
                }
                if (/^[a-z]+$/.test(c)) return Color.colornames[c];
                if(c.indexOf('hsl')== 0) c= Color.hslToRgb(c);
                else{
                    c= c.match(/\d+(\.\d+)?%?/g);
                    if(c){
                        c= c.map(function(itm){
                            if(itm.indexOf('%')!= -1){
                                return Math.round(parseFloat(itm)*2.55);
                            }
                            return parseInt(itm);
                        }).slice(0, 3);
                    }
                }
            }
            if(c && c.length=== 3) return Color.rgbToHex(c);
        },
        hexToRgb: function(hex){
            var c= '0x'+hex.substring(1);
            return [(c>> 16)&255, (c>> 8)&255, c&255];
        },
        hslToRgb: function(hsl){
            if(typeof hsl== 'string'){
                hsl= hsl.match(/(\d+(\.\d+)?)/g);
            }
            var h= hsl[0]/360,
            s= hsl[1]/100,
            l= hsl[2]/100,
            t1, t2, t3, rgb, val;
            if(s== 0){
                val= l*255;
                return [val, val, val];
            }
            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);
            }
            return rgb;
        },
        rgbToHex: function(rgb){
            rgb= rgb.map(function(c){
                c= (Math.round(+c).minmax(0, 255));
                return c.toString(16).padZero(2);
            });
            return '#'+rgb.join('').toLowerCase();
        },
        rgbToHsl: function(c){
            var r= c[0]/255, g= c[1]/255, b= c[2]/255,
            min= Math.min(r, g, b), max= Math.max(r, g, b),
            d= max - min, h, s, l;
            if(max== min) h= 0;
            else if(r== max) h= (g - b)/d;
            else if(g== max) h= 2 +(b - r)/d;
            else if(b== max) h= 4 +(r - g)/d;
            h= Math.min(h*60, 360);
            if(h < 0) h += 360;
            l= (min + max)/2;
            if(max== min) s= 0;
            else if(l <= 0.5) s= d/(max + min);
            else    s= d/(2 - max - min);
            return [Math.round(h), Math.round(s*100), Math.floor(l*100)];
        }
    }
    var CP={
        getName: function(){
            var C= Color.colornames, hex= this.hex;
            for(var p in C) if(C[p]=== hex) return p;
            return '';
        },
        rotate: function(d){
            if(typeof d!= 'number') d= 180;
            var C= this.hsl.slice(0);
            d+= C[0];
            C[0]= Math.abs(d%360);
            return Color(Color.hslToRgb(C));
        },
        shade: function(s, v){
            var C= this.hsl.slice(0);
            if(typeof s== 'number') C[1]= s.minmax(0, 100);
            if(typeof v== 'number') C[2]= v.minmax(0, 100);
            return Color(Color.hslToRgb(C));
        },
        toHsl: function(c){
            c= c || this.hsl;
            return 'hsl('+c[0]+','+c[1]+'%,'+c[2]+'%)';
        },
        toRgb: function(){
            return 'rgb('+this.rgb.join(',')+')';
        }
    }
    for(var p in CC) Color[p]= CC[p];
    for(var p in CP) Color.prototype[p]= CP[p];
    Color.prototype.toString= function(){
        return this.hex;
    }
})();

示例代码-

var C= [], hue= Color('red');
while(C.length<6){
    C.push((hue.getName() || hue.hex)+'='+hue.hsl);
    hue= hue.rotate(60);
}
C.join('\n')

returns:

red=0,100,50
yellow=60,100,50
lime=120,100,50
aqua=180,100,50
blue=240,100,50
fuchsia=300,100,50

您可以使用其他颜色字符串值 - 例如Color('rgb(255,0,0)')，或 Color('#ff0000') 或 Color('hsl(0,100%,50%)');

- kennebec