Wednesday, February 20, 2008

HOWTO: Find the RGB Values of a Color

When customizing our blog, we come across situations where we need the exact RGB value of a given color. This article explains a simple technique to find the RGB values using MS Paint and the Calculator applications that come as standard applications with your operating system.

The technique might seem a bit tedious, but the advantage is that it needs no specialist software tools or graphics applications. And even if you are not a graphics expert you can use it easily.

Here are the steps to find the exact RGB value of a given color.

1) View your blog using your favorite browser, scroll down until you see the color you want to find the RGB value and press the "Print Screen" button (in your keyboard).

2) Open MS Paint and click Edit -> Paste or simply Ctrl+V. What you saw in the browser will be copied as a new untitled image.

3) Select the Color Picker tool and click on an area that has the color you want to match. (For example, in the figure below we are going to pick the gray shading in the background)

4) Now go to Colors -> Edit Colors... option and click on the "Define Custom Colors >>" button. The color you picked will be selected on this palette. At the bottom right hand corner you will see the Red, Green and Blue values you need. Note down the R,G,B values (given in decimal).

5) Now we need to find out the hexa-decimal values that correspond to those decimal values. This is where we use the simple Calculator. Open the Calculator application from Program -> Accessories. Switch to the scientific mode by clicking View -> Scientific.

6) By default it will be in the decimal number mode. Enter the R value (238 in this example) and click on the Hex radio button. The corresponding hexa-decimal value (EE in this case) will be shown in the dial.

The selected color in this case has the same value for R, G and B. (In fact, all shades of gray has the same values for R, G and B.) Therefore, the RGB value of the background color that we need is #eeeeee.

Repeat step 6 to find out the hex value for the Green and Blue elements, if they are different.

If you find it difficult to pick a color, zoom the image by pressing Ctrl+PageDown or using View -> Zoom -> Custom... option.