Example and Formulas

We present in this tutorial a nice custom color picker but our real goal is to present formulas for extracting RGB components from a color value, combining RGB componets into a color value, and rewriting a color in its familiar hexadecimal form.

Download

  • Download all files corresponding to this tutorial: rgbs.zip

The Formulas

In one form or another, the formulas presented below for extracting and combining RGB are known. (On the next page we give references to a couple of books that deal this topic.)

Color information in AS3 comes in two basic forms 24-bit and 32-bit. 24 bits hold the binary information about the red, green, and blue components of a color, RGB. In 32-bit version, there are 8 additional bits that hold information about transparency, i.e. Alpha, of an object or a pixel, ARGB. In this tutorial we deal with 24-bit colors and talk about the 32-bit color values only parenthetically.

Each 24-bit RGB color is represented by an unsigned integer (uint) between 0 and 16,777,215. This value of a color is returned, for example, by the BitmapData.getPixel(x,y) method used in our color picker. It is not immediately clear how to extract RGB values from a color's numerical value. Neither it is automatically clear how to rewrite the value in its more familiar hexadecimal form. The functions below do just that. The RGB components are unsigned integers between 0 and 255.

Functions that extract red, green and blue components from a color value c:

function extractRed(c:uint):uint {

return (( c >> 16 ) & 0xFF);

}

 

function extractGreen(c:uint):uint {

return ( (c >> 8) & 0xFF );

}

 

function extractBlue(c:uint):uint {

return ( c & 0xFF );

}

Function that combines red, green and blue components in to a color value:

function combineRGB(r:uint,g:uint,b:uint):uint {

return ( ( r << 16 ) | ( g << 8 ) | b );

}

Function that gives a color value in the HEX form:

function displayInHex(c:uint):String {

var r:String=extractRed(c).toString(16).toUpperCase();

var g:String=extractGreen(c).toString(16).toUpperCase();

var b:String=extractBlue(c).toString(16).toUpperCase();

var hs:String="";

var zero:String="0";

if(r.length==1){

r=zero.concat(r);

}

if(g.length==1){

g=zero.concat(g);

}

if(b.length==1){

b=zero.concat(b);

}

hs=r+g+b;

return hs;

}

Download zip file linked above to see the formulas in action in our color picker example. The extraction functions are used when the user clicks on the picker. The combination function is used when the user slides the sliders. The conversion to HEX formula is used to display the hexadecimal form of a selected color in the HEX box.

For simplicity, we placed all the code on the MainTimeline. You can easily write an AS3 class encompassing the above formulas as public methods.

The functions above use bitwise shits, >>, << and logical operators AND and OR, &, |. On the next page we explain how those operators work, how the binary form of a 24-bit or 32-bit color looks like, and how the hexadecimal form comes into the picture.

Comments

The extraction formula will work for 32-bit color values c and it is easy enough to add extractAlpha function. It is equally easy to write combineARGB(a,r,g,b) function. (We show how to do it on the next page.)

The displayInHex function will work for 32-bit color values c; it will ignore the Alpha information, though. Again, it is very easy to change the function if you need 0xAARRGGBB form.

Note that in the displayInHex function we couldn't simply use c.toString(16) as the method toString(16) omits all leading zeros. For example, for the color value c=3327 which in HEX is represented by 000CFF, we would get c.toString(16)=cff.

Other Color-Related Tutorials

On the next page you will find explanations and more comments.

Back Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.