I’ve watched a lot of web developers jumping between their HTML code editor and their page comp in Photoshop to look up the hexadecimal value of colors in the page comp. Should be a simple process but the steps they take are often painful to watch. So I decided to write up some Photoshop tips to show some better ways to look up HEX values in Photoshop.
The workflow I see web devs use to look up HEX values in Photoshop is often:
to open the Color Picker dialog box.
Bleh, that’s pretty awkward, plus who likes the whole dialog box experience? …suddenly taking you out of your workspace and freezing the entire application to focus on only the dialog. Especially annoying when you’re in the dialog but discover you need to back up and select something else, then reopen the dialog box.
The default INFO panel settings show the RGB and CMYK values of the color under your pointer as well as the XY coordinates and dimensions. But why just accept the default settings? You deserve better, so check this out.
to open the Info Panel Options dialog box:
One inconvenience is that you can’t copy the values in the INFO panel, you’ll have to hand type the values into the code editor. And second, the values disappear as soon as you move your pointer away.
Next method I’ll show you is to use the COLOR panel. By default the panel provides you with RGB sliders:
But again, stop settling for the default settings!
The Copy Color as HTML command can be useful in many circumstances. One place to access this command is in the Options menu in the COLOR panel:
When you click Copy Color as HTML, the current hexadecimal color in the COLOR panel is copied, and when you paste into the code editor, you get this:
Sometimes that’s useful, but not if you need something like
or many other things, so would be better if what was copied was just the HEX value instead of Photoshop assuming the property you want.
You can also access the Copy Color as HTML command while sampling color with the Eyedropper tool in your document.
Just put the Eyedropper over the color you want to sample, then right-click and select Copy Color as HTML: