Find the Hex Code (Number) of a Color in Photoshop (Sample with Eyedropper)

Learn how to find the Hex Code (Number) of any color in Photoshop. Also learn how best to sample colors using the Eyedropper Tool. Details below...

0:00 - Intro
Quick summary of process for sampling a color and extracting the Hex code.

0:20 - Eyedropper Tool Tips
The keyboard shortcut for the Eyedropper Tool is "I". Numerous tools share this keyboard shortcut so be observant as to which tool is in use having pressed "I".

Within the Options bar running along the top of Photoshop are several settings for the Eyedropper Tool including...

Sample Size:
The "Point Sample" option will sample the color from the pixel that is clicked on. The other options will create a color based on the average of the pixels surrounding the pixel that was clicked on. "3 by 3 Average" will, for example, average the 9 pixel grid centred around the pixel that was sampled.

Sample:
"All Layers" will return a value that corresponds to what is seen on screen. The other options will discriminate against various layers depending on different criteria.

1:32 - Color Picker Tips
Clicking on a color chip from the bottom of the Tools panel will launch the Color Picker. With this dialog box open, color can still be sampled by simply clicking within the image. The Hex code is the six digit value near the bottom of the panel that is preceded by the "#" symbol.

2:34 - Practical Web Example
Color on the web is frequently defined using Hex codes. Having sampled a Hex code in Photoshop, this number can be easily copied and pasted into HTML editing software.

Image by:
Joel Vodell

[westside]

Thank you for making one of the only pieces of educational content on the Internet that answers the question within the first 5 seconds!!!

[ethanbissinger]

DUDE THANK YOU! Within the first 10 seconds is so great, no intro right at the beginning, that was amazing!

[Schnitz]

In five seconds, you gave me exactly what I wanted; the rest of the video is a bonus. Cheers, mate!

[Minewitcher]

You sir are a ledgend, 12 seconds. thank you so much.

[sophg]

Very helpful, thanks for cutting to the chase straight away!

[old.fashioned.online]

Great job, my question was answered.... then you added value. Thank you.

[PeterKellner]

Thank you for thinking of those of us in a hurry!

[LEDBaseLineIncDenver]

thank you for answering that so easily!

[nazeebnahas]

Exactly what I was looking for. Thank you so much!

[lilaccident]

Instant like an subscribe from me dude, got the answer i needed within 12 seconds :))