Binary Basics

In everyday life, you deal with numbers using a base 10, or decimal, representation. This means that each digit in the number is given a value 10 times greater than the digit to its right. This becomes clear when you break a number into the sum of its digits:

89,403 = (8 x 10,000) + (9 x 1000) + (4 x 100) + (0 x 10) + (3 x 1)

Looking at the above, you can see that a number represented in base 10 is in fact the sum of each of its digits multiplied by powers of 10, beginning with 10 to the power of 0 (anything to the power of 0 equals 1) for the least significant (rightmost) digit, and increasing successively with the significance of the digit:

89,403 = (8 x 10^4) + (9 x 10^3) + (4 x 10^2) + (0 x 10^1) + (3 x 10^0)

Most likely, humans use the base 10 number system because of our physiology: 10 fingers, base 10. Makes sense.

Computers, on the other hand, only work with two “fingers,” the on and off states of a Boolean switch. As such, computers work natively with numbers in a base 2 system that uses only two digits: 1 and 0. As with base 10, base 2 numbers are equal to the sum of each digit multiplied by successive powers of 2:

110010 = (1 x 2^5) + (1 x 2^4) + (0 x 2^3) + (0 x 2^2) +
         (1 x 2^1) + (0 x 2^0)
 110010 = (1 x 32) + (1 x 16) + (0 x 8) + (0 x 4) + 
         (1 x 2) + (0 x 1)
 110010 = 32 + 16 + 2 = 50 

An excellent understanding of binary math used to be a requirement for any developer. As programming languages have become more mature, however, they have abstracted the computer’s native number model to the point where many developers can go years—or even a whole career—without ever having to work directly with binary values.

There are certain things that are still easier to do in a binary system, though, and working with color values is one of them.

Color and Hexadecimal Numbers

Every web designer knows that colors are typically represented as a hex value, but what is a “hex value,” exactly?

Hex is short for hexadecimal, which is another common number system in programming. Hexadecimal is a base 16 number system, which of course means that it uses powers of 16 to determine the value of each digit. Because there are only 10 numeric symbols (0–9), and hexadecimal allows up to 16 values for each digit, it uses letters for the higher digit values: A represents a value of 10, B is 11, and so on, up to F which has a value of 15. Here’s a simple hexadecimal example:

B0A2 = (11 x 16^3) + (0 x 16^2) + 
       (10 x 16^1) + (2 x 16^0)
 B0A2 = (11 x 4096) + (0 x 256) + (10 x 16) + (2 x 1)
 B0A2 = 45056 + 160 + 2 = 45218 

A hex value is simply a hexadecimal number that represents a color. This representation is divided into discrete digits that represent the intensity of a particular color channel. For RGB colors, these are red, green and blue, of course. In Flash 8, you can often work with a fourth channel for alpha (transparency), which gives us ARGB. Each channel is represented by two digits, so in an ARGB color value the first two digits indicate the alpha value, the next two represent the red, then green, and finally blue, like so:

How does all of this tie back to binary? Well, 16 equals 2 to the power of 4, which means that one hexadecimal digit can be used to represent four binary digits. So you can think of an ARGB color value as an eight-digit hex value, or a 32-bit binary value. Likewise, an RGB value can be represented as a 24-bit binary value. This is, of course, why we call it 24-bit or 32-bit color depth.

Take a look at the demo below (requires Flash Player 8). Enter an ARGB color value into the fields at the top to see it converted to binary and decimal:

There is no way to enter a binary value directly in ActionScript but you can enter a hexadecimal value by prefixing the number with “0x”, such as:

var myColorValue:Number = 0xFF00CC;

Being able to work with colors as binary values is convenient because it means you can utilize a powerful set of tools to manipulate colors: bitwise operators.

Tip: By default, Flash displays numbers in decimal format. If you would like display a number as a binary or hexadecimal value, you have to convert it to a string by using toString and passing in the radix (another word for base) as the first parameter like so:

trace(myColorValue); 
// decimal: 16711884
 trace(myColorValue.toString(16)); 
// hexadecimal: ff00cc
 trace(myColorValue.toString(2)); 
// binary: 111111110000000011001100 

This only works well with RGB values because the toString method has a maximum value of 2147483647 (0x7FFFFFFF), which ARGB values will exceed.