The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 4 of 4

Thread: Calculating a lighter shade from a passed color

  1. #1

    3boxes Calculating a lighter shade from a passed color

    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.

  2. #2
    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

  3. #3
    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.

  4. #4

    It works

    *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.

    Code:
     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();
    Attached Files Attached Files
    Last edited by slopps; January 3rd, 2007 at 01:19 PM. Reason: code wasn't formatted

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012