Find Color Codes of Websites by using Photoshop

When we browse through internet we come across several websites several images and many more things and sometimes we like some colors of some websites or images which we like but we don’t know how to add or use those colors in your website. This tutorial will help you to do that in very easy & simple steps. By following these steps you won’t require the source file or source code or the time ruining method of trying to figure out the one from 100’s of different shades of the required color. It will help you to get the hexadecimal code of the desired color you need for your website.

1^st Step: Getting the screen-shot of the desired website

The first step to do is to get a screen-shot of your desired thing (like I have selected our website for example). Locate the "Print Screen" key on the keyboard. The key may be labeled with an abbreviation, such as "PrtScn", and is usually found in the top row of keys. Copy the content you are viewing to the clipboard by pressing "Print Screen." If your "Print Screen" or "PrtScn" command is located inside a small box on the same key as "Insert" or another command, press "Function" or "Fn" and the key at the same time. Otherwise, just press the "PrtScn" key, the same procedure can be used for laptop keyboards too.

2^nd Step: Adding screen-shot of the website to Photoshop

Launch Photoshop and create a new document form the ‘File’ tab on the menu bar (or just press Ctrl+N). When you get to the size selection option, select a desired size (like I have selected the size of 1024*768 pixels) according to your requirement.

You can see in the below image a preview of Bridge option:



Then paste the PrtScn item in it (Ctrl+V can also be used) as shown in the below figure:



Now we have copy your desired website screen-shot on your Photoshop to process the colors in it.

Step 3: Using the Eyedropper Tool in Photoshop to find color codes:

We’ll be using the eyedropper tool from the Toolbar at the left side of the screen like the below figure at the center of the picture.



The eyedropper tool helps to determine the color code of the selected color in the like the red color of our menu bar.

Select the ‘Eyedropper Tool’ from the eyedropper button on the toolbar and click on the desired color (like I used the red menu bar in our website) and you’ll see the red color selected in the foreground color on the Color Picker on the bottom left of the toolbar. The color identification process can look like the below picture:



The circular red thing shows the selected color in the foreground color block.

If you click on the Color Picker you would get a window popped up with the color details (as in the below picture) which also contains the hexadecimal color code with a symbol ‘#’of the selected color which is ‘b8011b’ in my selected color.



You can also check the other color’s codes by following the same procedure for other colors (as shown below):



The color code of the secondary selected color is ‘e7e7e7’ as in the below picture below:



What are the uses of the color codes information in this tutorial?

As you have followed the tutorial you can see that the basic purpose of this tutorial is to acquire the hexadecimal color code of any required color which is given or desired by you. It the simple and easiest method to the get the results by following the basic steps provided in this tutorial.