Question

我只是想知道是否可以从一种颜色生成3种自动颜色变体

例如，如果用户选择蓝色，则系统应选择3种蓝色，1 30％轻，2 60％轻，第3种轻90％。

我们正在建立一个品牌网站。

它可以是php的javascript。

任何人都可以对此有所了解。任何示例链接，教程链接......

谢谢你， KARTHIK

Answer 1

对于Javascript / jQuery方法，您需要获取颜色的RGB值。例如，.css()函数为rgb(0,0,0)提供background-color形式的值。

你只需要解析它就可以获得单独的红色，绿色和蓝色组件，从那里，获得30,60和90％更轻的变体将是简单的数学。

Answer 2

如果这是你的意思，你应该能够挑选出你可以使用的代码。它使用色调/饱和度和值来比较和修改颜色

colorFamily（ '蓝'）GT;＆GT; ＃000057，＃0000ab，＃0000FF

colorFamily（ '红'）GT;＆GT; ＃570000，＃ab0000，＃FF0000

colorFamily（ '黄色'）GT;＆GT; ＃575700，＃abab00，＃FFFF00

window.Run= Run || {};// 'namespace'
Run.colors={
    colornames:{
        aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
        gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
        navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
        silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
    },
    toHex: function(c){
        var tem, i= 0, c= c? c.toString().toLowerCase(): '';
        if(/^#[a-f0-9]{3,6}$/.test(c)){
            if(c.length< 7){
                var A= c.split('');
                c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
            }
            return c;
        }
        if(/^[a-z]+$/.test(c)){
            return Run.colors.colornames[c] || '';
        }
        c= c.match(/\d+(\.\d+)?%?/g) || [];
        while(i< c.length){
            tem= c[i];
            if(tem.indexOf('%')!= -1){
                tem= Math.round(parseFloat(tem)*2.55);
            }
            else tem= parseInt(tem);
            if(tem< 0 || tem> 255) c.length= 0;
            else c[i++]= tem.toString(16).padZero(2);
        }
        if(c.length== 3) return '#'+c.join('').toLowerCase();
        return '';
    }
}
Run.Color= function(c){
    this.hex= Run.colors.toHex(c);
    this.rgb= this.hextoRgb(true);
    this.hue= this.toHsv();
    var r= this.rgb;
    this.isgray= !!(Math.max.apply(null, r)== Math.min.apply(null, r));
}
Run.Color.prototype={
    hextoRgb: function(){
        var c= '0x'+this.substring(1);
        c= [(c>> 16)&255, (c>> 8)&255, c&255];
        return c;
    },
    hsvtoRgb: function(){
        var c= this.hue;
        var h= c[0]/360, s= c[1]/100, v= c[2]/100;
        var n= Math.floor(h*6), f= h*6 - n;
        var x= Math.round((v*(1-s))*255);
        var y= Math.round((v*(1-f*s))*255);
        var z= Math.round((v*(1-(1-f)*s))*255);
        v= Math.round(v*255);
        switch(n%6){
            case 0: return [v, z, x];
            case 1: return [y, v, x];
            case 2: return [x, v, z];
            case 3: return [x, y, v];
            case 4: return [z, x, v];
            case 5: return [v, x, y];
        }
    },
    shade: function(s, v){
        var C= this.hue.slice(0);
        if(typeof s== 'number') C[1]= Math.max(0, Math.min(s, 100));
        if(typeof v== 'number') C[2]= Math.max(0, Math.min(v, 100));
        return new Run.Color('', C);
    },
    substring: function(n, n2){
        var c= this.hex;
        if(!n2) n2= c.length;
        return c.substring(n, n2);
    },
    toHsv: function(){
        var c= this.rgb;
        var r= c[0]/255, g= c[1]/255, b= c[2]/255;
        var max= Math.max(r, g, b), min= Math.min(r, g, b);
        var h= 0, s= 0, v= max;
        if(max!= min){
            var d= max-min;
            s= d/max;
            switch(max){
                case r: h= (g-b)/d +(g< b? 6: 0);
                break;
                case g: h= (b-r)/d + 2;
                break;
                case b: h= (r-g)/d + 4;
                break;
            }
        }
        return [Math.round(h*60), Math.round(s*100), Math.round(v*100)];
    }
}
Run.Color.prototype.toString= function(){
    return this.hex;
}

function colorFamily(c){
    c= new Run.Color(c), A= [], i= 34;
    while(i<= 100){
        A.push(c.shade('', i));
        i+= 33;
    }
    return A;
}

自动从一种颜色中选择3种颜色变体进行品牌塑造

2 个答案: