Automatically pick 3 colour variants from one colour for branding

I am just wondering whether it is possible to generate 3 automatic colour variant from one colour

for example if a user chooses Blue the system should pick 3 varients of blue, 1 30% lighter, 2 60% lighter and the 3rd 90%lighter.

We are making a website with branding.

It can be in javascript of php.

Can anyone please shread some 开发者_StackOverflow中文版light on this. any example links, tutorial links...

Thank you, Karthik

For a Javascript / jQuery approach, you'll need to get the RGB value of a color. For example, the .css() function gives you a value in the form of rgb(0,0,0) for something like background-color.

You'll just need to parse that to get the individual red, green and blue components and from there, it'll be simple math to get the 30,60 and 90% lighter variants.

If this is the sort of thing you mean, you should be able to pick out the bits of the code that you can use. It uses hue/saturation and value to compare and modify colors

colorFamily('blue')>> #000057,#0000ab,#0000ff

colorFamily('red')>> #570000,#ab0000,#ff0000

colorFamily('yellow')>> #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;
}