I’ve mentioned in past posts that I’m teaching an upcoming Photoshop course at work. I’m not an expert but I can make my way around the tool. I’m sharing my class in pieces. This post is about using the Color Picker tool. It’s not the most powerful part of Photoshop, but I love it.
Using Photoshop you can get the exact color of any point in an image. It will get you the information in numerous ways:
- HSB – Hue, Saturation Brightness
- RGB – Red, Green, Blue
- Hex value – HTML-friendly color
- Lab – Lightness Component, A Component, B Component
- CMYK – Cyan, Yellow, Magenta, Black; color is represented by percentage saturation of each color
When you click your mouse anywhere on the color picker, the values for HSB, RGB, Hex, Lab and CMYK will all adjust accordingly.
By selecting the Color Libraries button, you can also view colors by common color systems. See the full list in the image below.
Knowing this is one thing, but it’s only useful if there are real world applications. And so:
- Your brand guide lists your logos Pantone color for printers, but not RGB value (which is easy to apply in Microsoft Word) or hex value (for web). By looking up those colors, you can create headlines and graphics that tie in with your logo color.
- You’re designing a piece in Photoshop (because you don’t know how to use InDesign) and want the type to match other elements in the piece.
- Someone hands you a graphic and tells you to fix it and you need to figure out how to replicate things in the same color palette.
- You’re handed a print piece and asked to make a version for the web but given no electronic files. You can easily scan in the piece and match the colors using Photoshop to replicate things online.
Ultimately, most people trying to match two colors just eyeball it. But by using Photoshop you can create pieces that look much more polished and pulled together.
How to Do It
The Color Picker is one of the easiest tools to use. Open an image and then click on the layered color boxes in your toolbar that look like this: 
. A window will open up and that’s your Color Picker. You’ll notice that if you move your mouse around over top your open image (outside the borders of the color picker window), your cursor will change to an eye dropper. Use this to sample a color from your image. Click in several different places on your image and you’ll see the color data in the color picker window change accordingly. You can also select a color right within the Color Picker window.
If you are only working within Photoshop, select your color and hit OK. This will change the colors shown in your toolbar for foreground color. (If you want to select a new background color, click on the 
curved double around to switch your colors and repeat the selecting process.)
If you want to take the color you just got from Photoshop and use it in another program, you will need the data shown in your color picker window here:
There are so many types of software you could use this in but I’ll only cover Microsoft Word here. To change the color of type to match what you are working with in Photoshop (and you would use these same steps for almost any other color in Word), go to your font color tool, which will reveal a window a new window.
Click on the more colors option, which will open up a new window. Select the Custom tab and the view will change to something similar to the Color Picker in Photoshop.
In the Red, Green and Blue fields you can type in the fields from R,G and B in Photoshop. This will result in a color that is an exact match to what you selected in Photoshop.
Want to start from the beginning? View class 1, which reviews the Photoshop toolbar. View Class 2, which reviews pictures for print versus web. View Class 3, which explores cropping and resizing images. View Class 4, which reviews balancing color. View Lesson 5, which goes over the clone stamp tool.
As always, see something you disagree with or think is just plain wrong? Tell me! Seriously – I want to know.
