Use Adobe Photoshop to Find Web Site Color Codes

This article was written by Richard Robbins

Have you ever been to a web site and thought, “Hey, I like those colors.  I wonder how easily I could integrate them into my web site.”  Often when I am designing a new web site, I find it helpful to set up a color palette by referring to what others have used.  Well, here’s a trick that will help you get the hexadecimal codes that comprise the color scheme for a web site.  Using this trick, you won’t have to use View Source and sort through a bunch of code trying to figure out which colors are represented by which codes.

Step 1: Capture the Screen

The first step is to do a screen capture by using your keyboards Print Screen key or key combination.  On my Dell Vostro keyboard, I hit the Fn key on the bottom left together with the F11/Prnt Scrn key at the top right of the keyboard.  In our example, we will discover the color codes for the scheme used by an online retail store that sells sweatshirts.  Navigate in your browser to SweatshirtStation.com.  We’re going to find the color codes for the brown, tan, and natural colors that go so well together on the site.  When the page loads, use the Print Screen option of your keyboard to place a copy of what’s on your screen on your computer’s clipboard.

Step 2: Open the Screen Capture in Photoshop

Now that you’ve got a copy of the web site page containing the colors you’re interested in, you’ll need to open the screen shot in Photoshop.  Open up Photoshop.  Create a new Photoshop document using File->New… or using CTRL+N.  Photoshop defaults to creating a new document with the same dimensions as what exists on the clipboard, so you don’t have to change any of the default settings for the new document.  Next, paste what you have on the clipboard onto the new Photoshop document.  Now you have the screen shot in position to access the color codes comprising the web site’s color scheme.

Step 3:  Use the Eyedropper Tool to Find Color Codes

We’ll use the eyedropper tool, pictured below, to determine the color codes for the natural, the tan, and the brown colors that make up the majority of the SweatshirtStation.com web site.  Select the eyedropper tool.  Then click inside the area of the natural (light tan) color that forms the background for the products advertised on the home page.  You’ll see the foreground color swatch on the toolbar menu change to represent that color.  Now if you click the color swatch, you’ll see a window popup – the Color Picker (Foreground Color) – that looks like the picture below.




At the bottom of the Color Picker there is a pound sign (#).  Next to that you can see the hexadecimal code that represents the color.  In this case, the code is e7cc95.  If we do the same thing for the tan color that forms the background for the middle part of the page and that surrounds the side boxes’ contents, we find that its hexadecimal code is ba9b5b.  Doing the same thing once again for the brown side box headers, we see that the color code is 281b12.

What Can We Do With This Information?

Now that we have the hexadecimal codes for the colors that we like from a web site, we can integrate those colors into our own web site by entering those codes into our stylesheet.  Using this trick saves a lot of time, as it allows us to build upon the work that someone else has already done in creating an appealing color scheme.

Leave a Reply

Your email address will not be published. Required fields are marked *