Any Screen Color Picker

Join National Association of Photoshop Prefessionals

| Home | All Tutorials | Close Window | Bookmark It | Print It || SuiteBlog

Any Screen Color Picker

Here's a few simple steps to capture any color from your screen, inside or outside the Photoshop program view. Though, many Color Pickers exist, there's actually a rudimentary one available within Photoshop's 'Eyedropper Tool (I)'.

To get the Color Code you want though, involves resizing Photoshop's program window so that the Eyedropper Tool can capture an area outside its program. (Ie so when you have a browser window open or another program behind Photoshop).

First resize your Photoshop window by simple hitting 'Restore Down' (middle) button at the upper right of your screen.

Then once you are free from the Programs full screen mode, click and drag on any of the programs edge/boundary (indicated by double arrow cursor below) to resize to your liking so that there's plenty of background in view. (ie the background could be a web page or another application)
Or, as in the second screen capture, simply click and drag from any of the four corners to reposition.

Next, simply close out any Floating Palettes (Brushes/Layers etc.) out of view, so as to maximize the viewing area. But leave the Toolbar visible and open a new document (any preset size, but the smaller the better)

Click here to see an example of a repositioned Photoshop window with my home page in the background.

Then play the little demo below to see this in action.

Summary:

a. Position Photoshop and the background area
b. Open a new document
c. Select the Eyedropper Tool (I)
d. With the Eyedropper Tool active, click anywhere inside the new document area, keep the mouse pressed and drag outside of Photoshop viewing area and notice the 'Foreground Color' Thumbnail Swatch change to reflect the color you hover over.
e. Upon release of the mouse, thats the color you capture.

Optional Tips:

Copy Color as HTML

Once you have captured a particular color from your screen, hit F6 on the keyboard to bring up the 'Color Palette' (if it isn't already visible) and from the 'Color Palette' menu options you can 'Copy Color as Html' ready for use with your HTML editor.

Create a Swatch Preset

If there are particular colors that you would like to reuse from a certain graphic, web page or program using the above color picker method, simply create a new empty swatch and add those particular colors to that new swatch.

There is no empty swatch preset to work from, so begin by opening the 'Preset Manager', via the 'Edit' menu and I'll show you the method to create one.

With the 'Preset Manger' open, switch the 'Preset Type' from the drop down list to 'Swatches', as I have captured.

Then lets select all the swatches EXCEPT for the first one, by selecting the second one, then hold down the 'Shift' key, then click the last one. (As I have captured)

Note: You can tell whats selected as they will be outlined in Black.

Then hit the 'Delete' command button to the right and you should be left with the following.

Note: A preset needs at least one swatch in order to be saved, thats why I left the red alone. At any time thereafter you can remove the red one once you've added your own swatches to the preset.

Next, click the red swatch to select it, as it will activate the other command buttons to the right. Select the 'Save Set..' option to create and save it for future use.

Note: It's a good idea to create two or more of these empty ones (with different names), so one can be used for immediately and the others for future use.
Even simpler thing to do is have a version available outside of the Photoshop default 'Color Swatch' folder location, then just simply copy and rename the empty to your preference.

Once hitting the 'Save Set' command, you'll be prompted to save. Just make sure it has a user friendly name that best represents your project or purpose. In my case I just created a TestSwatch.aco set in the default location.

Note: Also make use of folders inside the default location so when it comes to backing up your own presets, they are easier to find, and not mixed in with the default ones. (Example with the lynda.com web swatches that comes with the Photoshop CS Suite extra resources cd)

Finally, to start adding your personal swatches using the above color picker method, go to 'Window/Swatches' to bring the 'Swatches Palette' to the foreground.
As captured below, select the 'Swatch Palette' menu option to the upper right, and choose 'Replace Swatches'.

Note: Replace only replaces the currently active set with the one you choose next.
Load, will load the set you choose next INTO the currently active set.

Choose the test swatch set we previously created, as captured below.

Note: You can also load 'Color Table' .ACT files into the preset.

This will load the test set we created earlier. Now hove over a empty (grey) area of the 'Swatch Palette' and notice the cursor change to a 'Fill Bucket' cursor. Simply click, and the current active 'Foreground Color' will be added to this swatch set.

Upon clicking in the empty area, you'll be prompted to give the swatch a name.

Click OK it its added to the set.

Repeat the process for any other colors you want saved to this particular set.

Note: Make sure you save your set changes when done, by going back up to the Swatch Palette menu and choose, 'Save Swatches'.
Also, remember, the initial swatch (the red one in this case) was required to create the set, so it's optional delete it now since there is more than one swatch in the set.