Calculating a lighter shade from a passed color

[slopps]

Hi everyone! This place is great and the website is a big help.

I'm trying to write a function for the purpose of generating a gradient fill from only one passed color. How can you take a passed color (0x0066cc, a blue, for example) and calculate a much lighter (almost white) shade of blue from it?

Any help would be much appreciated! Thanks again for all the previous aid I've gotten from you guys.

[creatify]

There's a number of tint color methods from what I've seen on this site, under Color. You'll have to register, but its a great site for ideas. You should be able to find something where you pass it a hex number and a value and it will return a new hex of a lighter or darker tint, then you can use that number as the other portion of your graident fill.

http://proto.layer51.com/

Also, Mario Klingemann has created and released fla w/ some amazing color control, some of those methods have color tint features built in - not sure what his code use restrictions are though, def. look in to that. This may be overkill for your project, but very cool stuff

http://www.quasimondo.com/archives/000565.php

[slopps]

Thanks. I'll look through that code and try to write a function out today to return the hex of the lighter shade (as a number). If I get it working I'll post it.

[slopps]

*Edit* FLA is now included

Ok, granted this is very sloppy since it has to convert from hex to RGB, RGB to HLS, up the luminance, HLS to RGB, then RGB back to hex. But given my novice programming skills it's all I could come up with. And it works, so I'm ok with it...
Any suggestions on improving are more than welcome. Thanks to layer51 for some of the converting functions.

 function calcGradient(hex:Number, percent:Number):Number{
    rgb = hexToRGB(hex);
    hls = RGBToHLS(rgb.r, rgb.g, rgb.b);
    hls.l = hls.l*(percent/100);
    if(hls.l > 240) hls.l = 240;
    if(hls.l < 0) hls.l = 0;
    rgb = HLSToRGB(hls.h, hls.l, hls.s);
    return RGBToHex(rgb.r, rgb.g, rgb.b);
}


////////////////////// Now for all the converting functions  ///////////////////////////

function hexToRGB ( hex:Number ){
   var returnObj:Object = new Object();   
   returnObj.r = hex >> 16;
   var temp = hex ^ returnObj.r << 16;
   returnObj.g = temp >> 8;
   returnObj.b = temp ^ returnObj.g << 8;

   return returnObj;
}

function RGBToHex (r, g, b ){
    var hex = r << 16 ^ g << 8 ^ b;
   return hex;
}

function RGBToHLS(r,g,b) {
    var h,l,s;
    var max = (Math.max(Math.max(r, g), b))/255;
    var min = (Math.min(Math.min(r, g), b))/255;
    var delta = max-min;
    l = (max+min)/2;
    s = (max == min) ? 0 : ((l <= 0.5) ? delta/l/2 : delta/(2-l*2));
    if(r/255 == max) h = (g-b)/delta/255;
    else if(g/255 == max) h = 2+(b-r)/delta/255;
    else if(b/255 == max) h = 4+(r-g)/delta/255;
    h *= 40;
    if(h < 0) h += 240;
    h = Math.round(h);
    return {h:((isNaN(h)) ? 0 : h), l:Math.round(l*240), s:Math.round(s*240)};
}


function HLSToRGB(h,l,s) {
    var r,g,b;
    if(s == 0) {
        r = g = b = Math.round(l/240*255);
    } else {
        h /= 240; l /= 240; s /= 240;
        var temp4,temp3;
        var temp2 = (l < 0.5) ? l*(s+1) : l+s-l*s;
        var temp1 = l*2 - temp2;
        for(var i=0; i<3; i++) {
            switch(i) {
                case 0: temp3 = h+1/3; break;
                case 1: temp3 = h; break;
                case 2: temp3 = h-1/3; break;
            }
            if(temp3 < 0) temp3++;
            else if(temp3 > 1) temp3--;
            if(temp3*6 < 1) temp4 = temp1+(temp2-temp1)*6*temp3;
            else if(temp3*2 < 1) temp4 = temp2;
            else if(temp3*3 < 2) temp4 = temp1+(temp2-temp1)*((2/3)-temp3)*6;
            else temp4 = temp1;
            switch(i) {
                case 0: r = Math.round(temp4*255); break;
                case 1: g = Math.round(temp4*255); break;
                case 2: b = Math.round(temp4*255); break;
            }
        }
    }
    return {r:r, g:g, b:b};
}



//////////////////////////// Working example  ///////////////////////////
import flash.geom.*;

    color = 0x0066cc;
    colors = [color, calcGradient(color, 200)];
    fillType = "linear";
    alphas = [100, 100];
    ratios = [0, 255];
    spreadMethod = "pad";
    interpolationMethod = "RGB";
    focalPointRatio = 0.9;
    matrix = new Matrix();
    matrix.createGradientBox(300, 300, 67.5, 0, 0);
    beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
    lineTo(0, 300);
    lineTo(300, 300);
    lineTo(300, 0);
    lineTo(0, 0);
    endFill();