4

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 code well enough to figure out what's what...

9

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.

9
  1. 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.

  2. Use a browser extension like Colorzilla to click and tell you what the color is.

  • 2
    FireFox, right click => Inspect Element on any background area gives you the answer so quick it's not funny. Click the little checkbox to toggle .site { background-color: } to verify that's what you're looking at and copy out the hex color code. – Fiasco Labs Feb 28 '15 at 23:28
5

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

enter image description here

4

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:

Chrome Dev Tools

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:

ColorZilla

1

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.

1

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.

Firefox color picker

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.