Bitwise RGBA Values

Let’s take a look at bit shifting in practice.

Say we have a variable called colour, that contains an RGBA value. If you have never had any experience with graphics, all you need to know is that the colours you see on your screen may be represented as a combination of four different variables – red, green, blue and alpha. The alpha value is usually a percentage to describe the opacity, while red, green and blue values are combined to describe the final colour.

RGBA values are usually stored in a single 32 bit integer, with 8 bits used for each component:

RRRRRRRR GGGGGGGG BBBBBBBB AAAAAAAA

All well and good, but imagine we need to know what the green value is independently of everything else. How can we extract this information? And moreover, how do we get a colour encoded into the variable in the first place?

Setting an RGBA value

Imagine we want to set our colour to a bright yellow, fully opaque. This uses the RGBA components:

R) 0xFF
G) 0xCC
B) 0x00
A) 0xFF

As binary this looks like:

11111111 11001100 00000000 11111111

OK, we could set the colour variable using a large number:

int colour = 4291559679;

but that isn’t a very intuitive (or re-usable) solution.

Instead we’ll add our components in one at a time using a mask, and shift them to the correct positions:

unsigned int colour =
0xFF | (0x00 << 8) | (0xCC << 16) | (0xFF << 24);

To fully break down what is happening here, let’s look at the binary behind the scenes:

The first step is a bitwise OR on 0xFF with 0x00 shifted left by 8 places:

0000 0000 1111 1111 // 0xff
0000 0000 0000 0000 // 0x00 << 8
___________________
0000 0000 1111 1111

The next step is a bitwise OR on the result with 0xCC shifted left 16 places:

0000 0000 0000 0000 1111 1111 // result
1100 1100 0000 0000 0000 0000 // 0xCC << 16
_____________________________
1100 1100 0000 0000 1111 1111

And finally a bitwise OR on the result with 0xFF shifted left 24 places:

0000 0000 1100 1100 0000 0000 1111 1111 // result
1111 1111 0000 0000 0000 0000 0000 0000 // 0xFF << 24
_______________________________________
1111 1111 1100 1100 0000 0000 1111 1111 // 0xFFCC00FF, or 4291559679

The final result is the number we want to assign to the colour integer.

Extracting an RGBA value

Now say we want to extract that green value from our colour integer. We can simply do the following:

int green = (colour & 0x00FF0000) >> 16;

What’s happening here?

First off, we’re masking our colour variable using bitwise AND to effectively “turn off” all the components that we aren’t interested in:

1111 1111 1100 1100 0000 0000 1111 1111
0000 0000 1111 1111 0000 0000 0000 0000
_______________________________________
0000 0000 1100 1100 0000 0000 0000 0000

Then we shift 16 places to the right to put our green component in the first byte:

0000 0000 0000 0000 0000 0000 1100 1100 // 0xCC

Simple! Now we know how to extract any component we choose by adjusting the mask and number of places shifted accordingly.

Bitwise operator summary

A quick guide to which operator to use when.

Bitwise AND

• Use with a mask to check if bits are on or off
• Turn off individual bits

Bitwise OR

• Turn on individual bits

Bitwise XOR

• Toggle bits on and off, like a switch

Bitwise NOT

• Turn off individual bits with AND

Bitwise left and right shift

• Extract bytes from longer variables
• Insert bytes into longer variables
• Multiplication and division by powers of 2 (but be cautious with signed integers, remainders and overflow)

This is not an exhaustive list, but a basic guide. Have fun with bitwise operators, and if you want more examples and ideas, have a look at this fantastic collection of code snippets from Sean Eron Anderson.