Oh, and REALLY this is called the Eyedropper tool, I just find myself calling it the Color Dropper. ;o) It’s also called the Color Picker.
With the Eyedropper tool selected (the shortcut is to simply press the “I” key), clicking with your mouse on any part of an image will change the foreground color box to the color of the pixels chosen. This can be done over and over with reoccurring clicks of the Eyedropper until the desired color is selected.
For precise color picking, you may want to zoom in on your image to more deliberately select pixels. (Some colors may be a combination of many different shades of a color, and the color you’re after may only be accessible through close-up picking.)
If the color needs some adjustment, you can use the selected color as a starting point for a lighter or darker color that will still be in the same color family and fit in with the layout. Open the color picker options box in the tool options bar. (You do this by clicking once on the foreground color box). See the circle in the color box? (#1 in the picture.) This lets you know the value of the currently selected color. When you put your mouse in the big box with all the colors, the arrow turns into a circle. Clicking directly above the circle representing the current color will change the color a little lighter, and clicking directly below it will select a color a little darker. You can preview the changes compared to the current color in the box between the colors and the ok button (#2 in the picture.) It will show the original on the bottom and the new selection above it. No changes are permanent until you hit ok to save out of the box.
Ok, so now that you HAVE the color you’re after, what can you do with it?
1. Once you get the color you want, within the toolbar click on the foreground color box once to pull up the color picker options box (which is shown above.) There is a box at the bottom right of this box with a 6 digit color code (#3 in the picture.) To use this color you can highlight and copy this code (“Ctrl” + “C” is copy), then paste the code ("Ctrl" + "V") wherever you want to use it, such as to customize a text's color. (This is explained in: "Custom Font Colors.” )
2. Change the foreground to background by clicking on the double arrow above the boxes. Now any prompts that give you the option "Use background color," your selected color will be used. (Like when creating a new document, under “Contents,” select “Background” for the color and you can create an entire image with this color.) (This is explained in: “A New, Solid Colored Image”)
3. You can use the color dropper to help figure out which web color you can use to go with an image. I’m thinking along the lines of Blogs now, but bear with me. You know how there’s only like 256 (216?) colors to choose from for the web? Anyway, it’s hard to tell, looking at a chart of available colors, which ones will go well with the color scheme you have in mind. BUT, using the Eyedropper, you can select a color that’s close to what you’re looking for (in this picture of my dad and my son, I’ve picked one of the blues of the bucket), then open the Color Picker options box and check that little box in the left lower corner that says “Only web colors.” This will change the Color Picker Options box’s colors to only colors that will translate to web colors. The color code can be found in the same spot as usual: the box at the bottom, center right with a number sign in front of it.