How to Grab Colors with ColorZilla’s Eyedropper for CSS3 Sites

By John Paul Mueller

The ColorZilla Eyedropper menu option displays a plus-sign mouse cursor. As you move the mouse cursor around a CSS3 page, a bar at the top of the page displays the current color value and other information. (The additional information includes the mouse cursor’s position and the CSS style name.)


When you click a particular color, the Eyedropper copies the information you see to the Clipboard. The bar will display the message “Copied to Clipboard” for a few seconds, and then the bar will disappear.

The output sent to the Clipboard is the hexadecimal color value. (Choose a different copy option on the Options→Auto Copy menu if you want to receive something other than a hexadecimal color value.) You don’t see all of the other information that appears on the bar when you paste the value into an editor.

The default ColorZilla option is to display the Eyedropper. You don’t have to choose a menu option to activate this particular feature — just click the Eyedropper icon in your browser instead.

The Eyedropper doesn’t work with linked images or icons in many cases. When you see the Eyedropper mouse icon change to some other icon, such as a pointing hand, then you know that color isn’t accessible by Eyedropper.

This problem occurs most often with images used to depict items you would click for additional information. The best option is to hover the mouse cursor over the item you want to interact with and see whether the cursor changes. If the cursor remains the same, then you can probably access that color value.