Extracting Colour Codes

Colour codes are normally referenced in stylesheets and Javascript as a 24 bit value with 8 bits each representing the red, green, and blue components of the colour with each of those components having 256 possible values ranging from 0 to 255. These codes are usually expressed in hexadecimal rather than as decimal numbers and so you have values between 00 and FF for each component or between 000000 (black) and FFFFFF (white) for the full colour code (which usually has a # in front of it to indicate that it is a number).

The obvious way of extracting the red, green, and blue component parts of any given colour so as to allow their values to be manipulated with Javascript is to treat the value as a string and use the substr() method to extract each part. This is actually a very inefficient way of doing it as it requires a function call and then code to convert each part back into a number after it has been extracted.

A more efficient way of handling the extraction is to use bitwise operators to extract the separate colour components as numbers to start with thus avoiding both the need for a function call and the conversion back to a number afterwards.

Let's start by extracting the blue component of the colour since this is the easiest to do as it is contained in the last eight bits of the number representing the full colour code. What we need to do to extract the blue colour from the full colour code is to apply a mask to the full colour code that sets the red and green parts of the colour to zero. With the other two components set to zero the value that we have represents just the blue component of the colour. To apply a mask to set selected bits in a value to zero we use the bitwise & operator and a mask value that has the bits set to 1 where we want to retain the original value and set to 0 where we want to zero it out. The blue colour component is in the last eight bits so we want to use a mask that has just those last eight bits set to 1. This value can be expressed as '0xFF' in hexadecimal or as 255 if we want to use an ordinary decimal number. So if the full colour code is in a field called 'colour' we can extract the blue component of the colour like this:

To extract the green component of the colour is slightly more complicated because it doesn't appear at the end of the colour value. The simplest way of extracting it is to first move it to the end of the colour value moving the blue component out of the way. We could do this by dividing by 256 and then extracting the integer portion of the result however there is a much easier and more efficient way of doing it. Effectively what we need to do is to move all of the bits in our colour value eight bits to the right so that the blue component drops off and the green component is moved to where the blue component was. We can do this using the bitwise right shift operator. Once we have the green component where the blue one was we can then extract it the same way we extracted the blue one. Our code to extract the green looks like this:

Extracting the red component is of course similar to extracting the green one apart from our having to move 16 bits to the right instead of 8.

The code to extract all three colours at once is:

Since you know exactly what each part of this code is doing and why it is of course as easy for you to understand now as any other Javascript commands (assuming that you know what bitwise operators are).