Create highlight and shadow in ActionScript 3

Question

Does anyone know how to create two new colours (highlight and shadow) based on one colour in ActionScript 3? So, if I have red (0xFF0000), I will get a light red and dark red too?

I have no idea. Thanks!

Answer 1

To get Highlight (lightness) you increase each R, G and B equally by same amount (with maximum at 255 or 0xFF). In your case Red is already at its maximum so increase both Green and Blue by same amount (eg do a += 128 on each of those channels).

To get Shadow (darkness) you decrease each R, G and B equally by same amount (with minimum at 0 or 0x00). In your case both Green and Blue are already at their minimum so just decrease only Red by x amount (eg do a -= 128 on Red channel).

In short:
Input = 0xFF0000 ... then Highlight = 0xFF8080 and Shadow = 0x800000.

Update:
A good point was made in the comments about highlight/shadow cases of other colours (or hues). If we agree that "lighter" means adding more white and "darker" means adding more black then maybe a linear interpolation might help you (basically make a gradient of input colour fading to black or to white and choose your preferred darker/lighter colour along those A-to-B paths...

PS: By interpolating, you'll have the flexibility of blending to different hues and shades of lightness/darkness. Maybe blend from a bright red towards a darker reddish-purple (instead of just black) for "sweeter" shade colours, and your greens could have yellow highlights (instead of just white). Blue is up to you.

example usage:

var newColour :uint = 0;
newColour = blendRGB_AS3 (0xFF0000, 0xFFFFFF, 0.5) //# get 50% white added
newColour = blendRGB_AS3 (0xFF0000, 0x000000, 0.5) //# get 50% black added

Example function:
(note: (temp_int >> 0) is used here as a quick Math.Floor for any fractioned results)

//# function inputs: src_C, dest_C, stopPoint ... where:
//# src_C = source / start colour A (as 0xRGB)
//# dest_C = destination / end colour B (as 0xRGB)
//# stopPoint = A-to-B stopping point (as ranging from 0.0 to 1.0)

function blendRGB_AS3 (src_C, dest_C, stopPoint ) :uint
{
    //# using Unsigned INTegers since no need of the minus ( - ) sign.
    var temp_int :uint = 0; var res_C :uint = 0;
    
    var src_R :uint = (src_C >> 16 & 0xFF);
    var src_G :uint = (src_C >> 8 & 0xFF);
    var src_B :uint = (src_C >> 0 & 0xFF);
    
    var dst_R :uint = (dest_C >> 16 & 0xFF);
    var dst_G :uint = (dest_C >> 8 & 0xFF);
    var dst_B :uint = (dest_C >> 0 & 0xFF);
    
    //# Now for each R, G, B Channel... 
    //# calculate the mid-point value then merge that into output of "res_C"
    
    //# for Red
    temp_int = src_R + stopPoint * (dst_R - src_R);
    res_C = ( (temp_int >> 0) << 16);
    
    //# for Green
    temp_int = src_G + stopPoint * (dst_G - src_G);
    res_C |= ( (temp_int >> 0)  << 8);
    
    //# for Blue
    temp_int = src_B + stopPoint * (dst_B - src_B);
    res_C |= ( (temp_int >> 0)  << 0);
    
    return res_C; //# gives: example 0xFF0000 if red
    
}