: How can I determine the background color of a site? How can I determine the background color of a site (so I can use that color in Photoshop)? I looked at the source code, but I don't know

@Courtney195

Why not simply use a color picker?
You can use this one and then just go in the area you want to exactly copy the color. You will have it in hex and RGB so can use in photoshop.

Vote Up Vote Down

@Turnbaugh106

There is a color picker tool in Firefox which you can use easily.
Tools> Web Developer > Inspector

It's shown in the picture below. You can point anywhere on the page and you'll have the color.

Vote Up Vote Down

@Jamie184

In most browsers, you can hit F12 to open a set of developer tools for inspecting the page. From there, you can click the search icon and click the element you want to see the background color of, then look for the background-color css property:



Or alternately, if this is something you do often, you could use a browser extension (like ColorZilla on Chrome) to make finding exact colors on web pages quite a bit easier:

Vote Up Vote Down

@Sarah324

Right click with your mouse on the web page and then click "Inspect Element". Then look to the right under the "Styles" tab (assuming you're using Chrome), and then under where it says:

.site {
background-color: #f8f3ef ;


This is the color (#f8f3ef). For future reference, you may have to do some looking around in the Inspect Element next time and just look for "background-color" and then the color code.

Vote Up Vote Down

@Deb1703797

Look for:

background-color:


That's your dead giveaway that a color (in hexadecimal format) is being set for the background of an element. I looked at the code just now and both values are the same.
#ece7e3


The value is in the format of # and 2 hex characters for amount of red, 2 hex characters for amount of green, and 2 hex characters for amount of blue all together to form one color. individual values must be from 00 to FF.

An easier way to try to match a color in a picture with a color of something on a page is to make use of the print screen button in windows. Simply open up one painting program along with your web browser. MsPaint should work.

Visit the website you mentioned in your browser.

Once its loaded, press the print screen button to take a snapshot of the screen then paste the contents in the painting program. Use the color picking tool to click on the part of the snapshot that you want to know the color of.

Vote Up Vote Down

@Vandalay111

Its a #f8f3ef , somtimes i just make print screen copy to Photoshop then grab color. But this method is the most lazy by Firebug

Vote Up Vote Down

@Kevin317

View the source code using a tool like Firebug or Chrome Developer Tools will make that easier to do. You can inspect an element, in this case the background, and see the CSS rules that applies to it.
Use a browser extension like Colorzilla to click and tell you what the color is.

Vote Up Vote Down