Color Programming in Flash

When I first thought about trying to wrap code around color values in Actionscript, years ago, I was super intimidated. I conjured up ideas that it was a world full of complex algorithms and crack-brained theories. That’s really about half true.

If your goal is some crazy results then you’re probably going to be dealing with some crazy algorithms. But otherwise the basics of it are pretty straightforward.

Note that I will not be talking about pixel bender in this post.

Color Theory

I’m not really going to talk about color theory at all. Basicaly because I don’t understand enough of it (yet) to talk in any real depth. Just not that color theory is a huge topic and thankfully you’ll only have to deal with a very tiny little part of it.

I have found that the Colour Space Conversions article can come in handy as it explains just about everything you might want to know about color.

Color in Memory

The foundation of color programming is understanding how a color is represented in code.

A color is made of 3 or more channels, each channel being 8 bits in size representing values from 0 to 255. In memory a color is stored as a single unsigned integer (uint) by arranging the bits of each channel side-by-side. So an RGB color would have a total of 24 bits (3 channels) and look something like this:

No, it’s not a power meter. As you can see the 8 red channel bits are the furthest to the left, then the 8 green bits and finally the 8 blue bits. And no, the bits themselves aren’t red, green or blue, they just represent those colors.

Since the bits are stored side-by-side then the color also has a number value. If all bits in a color are off (zero) then the number value is 0 (which is used to represent black). If all bits are on (one) then the number value depends on how many channels the color has (i.e. 3 channels = 16777215). This max value is used to represent white.

There are two different color spaces in Flash/Flex: RGB and ARGB

RGB is just like the example above with a red channel, green channel and blue channel. This is called a 24 bit color and is pretty standard.

ARGB is like RGB but has an alpha channel. This is called a 32 bit color (because of the extra channel).

Color in Syntax

The most common way for defining a color in code is by using the hex syntax:

// 24 bit colors
var black24:uint = 0x000000;
var white24:uint = 0xffffff;
 
// 32 bit colors
var black32:uint = 0x00000000;
var white32:uint = 0xffffffff;

Just like a hex code in HTML except the hash (#) is replaces by a 0x. Notice that a 32 bit color has two extra values for the alpha channel.

Since a color is also an integer value you could use integers to define your colors:

// 24 bit colors
var black24:uint = 0;
var white24:uint = 16777215;
 
// 32 bit colors
var black32:uint = 0;
var white32:uint = 4294967295;

Color in Code

Now that we know how colors are stored, lets talk about how to tear a color apart to extract it’s different channels. Since the channels are stored side-by-side in an unsigned integer we have to do some bitwise operations to get their values.

If you don’t know what bitwise operations are I would highly advise looking into them. They’re kinda confusing at first but they can be a huge boost to your code.

Here’s the code for grabbing channel values from a color:

// for 32 bit colors
var alpha32:int = color32 >> 24;
var red32:int = color32 >> 16 & 0xff;
var green32:int = color32 >> 8 & 0xff;
var blue32:int = color32 & 0xff
 
// for 24 bit colors
var red24:int = color24 >> 16;
var green24:int = color24 >> 8 & 0xff;
var blue24:int = color24 & 0xff;

The method is this:

1. Shift the bits to the right by the size of a channel (8) multiplied by number of preceeding channels
2. Bitwise AND by value 255 (binary 1111, hex 0xff)  to clear any channel bits to the left of desired channel

The resulting channel values will be between 0 and 255.

Now that we can get channel values, how do we stitch them back together to form a cohesive color? More bitwise action!

// for 32 bit colors
var color32:uint = alpha32 << 24 | red32 << 16 | green32 << 8 | blue32;
 
// for 24 bit colors
var color24:uint = red24 << 16 | green24 << 8 | blue24;

The method:

1. Shift the channel value to the left by the size of a channel (8) multiplied by the number of preceeding channels
2. Bitwise OR each shifted channel value in order (RGB or ARGB);

Conclusion

That’s about it for the basics. There’s a bajillion things you can do once you know how to tear apart and restitch colors.