Different Techniques for Grabbing Color from Anywhere on the Screen

Designers of all breeds get color inspiration from anywhere, and often times it is right from the screen you are looking at. So how do we grab those colors from our screen for use in our projects? Let us count the ways:

Use the Photoshop Eyedropper Trick

If you double-click the color selector in Photoshop and get the color picker dialog box, you can sample colors from outside that box, but only from open Photoshop documents. There is a trick you can use in Photoshop though to sample color from anywhere on the screen. Select the Eyedropper tool. Then click and hold down the mouse button inside an open Photoshop document. With the mouse button held down, you can then drag the eyedropper tool outside the Photoshop document to sample color from anywhere on the screen.

Use a Software Utility

If you are on a Mac running Leopard, buried in the Utility folder in your Applications folder is an application called the DigitalColor Meter. Simply choose what format you want to see the colors in (web-friendly hex codes available) and then just move your mouse about the screen. You will see a zoomed in section of the area you are in, a color swatch, and the color values.

For Windows users, there is a free tool called ColorPic that does the same thing and actually has a lot more cool features. Things like save-able palettes and the ability to “nudge” around.

I’m sure there are many other great little software tools for this for all platforms. If you have a favorite, please share!

Use a Firefox Extension

Since a lot of times the colors we are trying to grab are from the web, we can make use of a handy little Firefox extension for this called Colorzilla. Colorzilla adds a little eyedropper to the bottom left corner of your browser window. You can click it to activate it and then mouse around the webpage to pick up colors. The icon change to represent the current color and you can click to “lock” that color. The best part is you can right-click the icon and get lots of options for copying that color code out:

So those are the most common ways I do this. Honestly since I’m in Photoshop so much, I typically just use the first technique, even though I’m sure it’s not the most efficient. How do you folks do it?