Question

我看到很多Js例子，但没有一个符合我的需求：

我想要一个脚本来生成colros，但是如果我使用通用解决方案

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

它产生柔和的色彩，我想要更饱和的颜色...或者更有野心，我如何选择我选择颜色的调色板形式？

我如何“限制”随机性？

Answer 1

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

如果您知道浏览器支持CSS3，您可以直接使用它。如果做不到这一点，可以使用HSL到RGB算法（20行代码），通过谷歌可以转换成十六进制格式。

从HSL到RGB的转换公式也在Wikipedia page on HSL上，很容易翻译成Javascript（以及大多数其他语言！）

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

你可以使用其他颜色的字符串值 - 颜色（'rgb（255,0,0）'）或颜色（'＃ff0000'）或颜色（'hsl（0,100％，50％）'）;

Javascript：生成随机漂亮的饱和色（选定的调色板）

2 个答案: