Digital Tip: Sample a Hexadecimal Color in Photoshop

The great thing about Photoshop is that no matter how much you know, you can always learn one more thing to save you tons of time. Here’s one I picked up recently in Jan Kabili’s Adobe Photoshop for the Web workshop:

What Hexadecimal Color is That?

If you’re designing for the web, you probably know that any color used in your design can be represented as a six-digit hexadecimal code, and that you’ll want to know this code if you’d like, for example, your navigation menu text to match the graphical elements around it.

So if you get a screen shot or graphical layout of the website in Photoshop and select your Eyedropper tool.

You can find out what the hex color code is for any website.

Then, right-click with the Eyedropper tool and you’ll get a contextual menu. Select Copy Color’s Hex Code. Now you have a hexadecimal code in your Clipboard and you can paste it into any text editor, WYSIWYG editor, etc. to set colors for text, borders, and backgrounds on your site.

You can copy the colors used on any website using a simple technique in Photoshop CS5

If you’re using CS4 or earlier, you won’t be able to copy the hex code directly, but you can select Copy Color as HTML and the bit of code that gets copied will include the hex code and a bit of extra HTML which you can delete.

I really wish I’d known this several years ago, but I’m thrilled to have it now!


Add your comment

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>