Getting Colour Values from Web Site Templates

Many of us aren’t the greatest Web site designers, or just don’t have time to design one, and because of this we rely on templates that others have created. The only problem with this is we may not understand how the entire Web site is designed with regards to files used and the layout of the site.

One issue that I have recently read about is getting the values for the site colours to use with Google Adsense. The template user wanted to know how to get the colours from the template to blend in the Adsense ads with the site. The problem a user may have is reading the cascading stylesheets that come with a template to find the correct colours. In this post I will show how to retreive a colour from a Web site without look at the cascading stylesheets.

Using an Image Editor

This method may seem long when you read it, but it basically involves taking a screenshot of the Web site, pasting it into an image editor and then retrieving the colour.

In this example I will use Windows Paint and Windows calculator to get the colour. You can use any image editor that allows you to retrieve colours, such as Photoshop or Paint Shop Pro.

To get the colours use the following steps:

1. Open up your Web browser and navigate to the Web site.
2. Press ALT+Print Screen to make a copy of the screen. The screen copy will be in memory, so you won’t see anything change.
3. Click Start->Run and then enter mspaint.exe in the Run dialog. This will open up Windows Paint.
4. In Paint, press CTRL+V to paste the screen copy from memory into the document. You should now see the screen in Windows Paint.
5. From the toolbar on the left, click the eyedropper icon, also called Pick Color and then click the colour you want to find the value for.
6. Once you have clicked the colour, click Colors and then Edit Colors from the menu at the top. You should now see the Edit Colors dialog box on the screen.
7. Click the Define Custom Colors button to expand that dialog box.
8. The colour you clicked with the eyedropper will be the selected colour in the dialog. Write down the three numbers beside Red, Green, and Blue labels. For the Web, we will be converting those three numbers to hexadecimal.
9. Click Start->Run and then type calc.exe in the Run dialog box.
10. With Windows calculator open, click View and then Scientific to get more advanced calculator functions.
11. Near the upper-left corner of the calculator you will see four option buttons: Hex, Dec, Oct, Bin. These are the differernt number systems. We will focus on Hex (hexadecimal) and Dec (decimal) for now. Ensure that Dec is selected.
12. Typein the Red value that you retrieved from Windows Paint in the calculator, and then click the Hex option. The value should now be converted to hexadecimal, which you should now record somewhere. If the number is not two characters in length, then append a leading zero to the value.
13. Click the Dec option and then enter the Green value, and then select the Hex option. Write down that value beside the red value.
14. Repeat the previous step for the Blue value and write that value down next to the green value.

For example, if you had a value of Red=155, Green=98, and Blue = 201, then your new number should be 9B62C9.

15. The number you should end up with will be 6 characters in length. This is the hexadecimal number that represents the colour you selected on your Web site. You can now use this number in Google Adsense, or any other place and the colour will match your Web site.

Summary

This post explained how to retrieve a colour value from a Web site without reading the cascading stylesheets. Windows Paint was used to retrieve the Red, Green, and Blue values of the colour, and Windows Calculator was then used to convert the three numbers to hexadecimal. Using this method, you can easily find out colour values of an colour on any Web site.