Wednesday, February 20, 2008

RGB Colors

When you try to customize your blog, you come across situations where you have to deal with some cryptic numbers that represent colors. For example, if you want to customize your AdSense ad units to match your blog's colors, you have to edit its various color elements.

These numbers are called the RGB color values and they are specified as hexa-decimal numbers (Hexa-decimal means the base 16 number system and in the absence of digits beyond 0..9, letters 'a' through 'f' are used for values '10' through '15'). RGB stands for the 3 basic colors Red, Green and Blue. A computer knows only to work with binary (i.e. 0 and 1) numbers. So what we write in the above cryptic form is actually a 24 bit color number.

The 24 bits are divided in to 3 equal parts of 8 bits, each representing one of the basic colors. 8 bits is 1 byte, so we have 3 bytes of information making up a color value. This is, in fact, the color used to paint an individual pixel (or picture element) on the screen. So a white background means a background where each pixel in that background is displayed using the color value #ffffff.

An RGB color value is specified with a leading '#' character. The '#' tells the computer that the proceeding number is a hexa-decimal number. The next 6 digits represent the color values for R,G,B using two digits for each. Each of the main colors are divided in to 256 different gradients and a number between 0..255 is assigned to each gradient. In binary, 255 is the largest number you can write using an 8-bit number (i.e. 11111111). Decimal '0' maps to binary 00000000.

A value that we write using 8 binary digits can be written using only two hexa-decimal digits. So the value 'fifteen' is written as 15 in decimal, as 1111 in binary and as ff in hex. This allows us to easily represent a 24 bit binary number as a 6 digit hexa-decimal number.

Therefore the number #6699cc tells the computer that the color values are 66 for R, 99 for G and cc for B. Those values map to the decimal numbers 102, 153 and 204 respectively. Another shortened form to right RGB colors is to use decimal numbers as in RGB(102,153,224).

This article explains a simple technique to find out the RGB color values of a given color.