Hack95.Grab Color Profiles from Other Web Sites

Hack 95. Grab Color Profiles from Other Web Sites

Use the ColorZilla Firefox extension to sample colors from any web site you visit with a simple eyedropper interface.

They say that a good artist borrows and a great artist steals. Sometimes when you browse the Web you run across a site and think "Man, those colors would look perfect on my page." What you might do then is either view the source code for the page to find color settings for fonts or backgrounds, or you might even open up one of the images on the site in an image manipulation tool such as the GIMP so you can analyze it with the eyedropper. If you ever find yourself in this kind of situation, ColorZilla is for you.

ColorZilla is a Mozilla Firefox extension that allows you to scan any web page for individual pixel colors. Once installed, you can enable ColorZilla, and the mouse becomes an eyedropper tool. Click a location on the page and the color settings will be displayed along the bottom.

ColorZilla is relatively easy to install. Open Firefox and click Tools Extensions and then "Get New Extensions to load the Firefox extensions page. ColorZilla is located under the Miscellaneous extensions category, or you can visit the official page directly at http://www.iosart.com/firefox/colorzilla. Click on the link to the ColorZilla .xpi file to install the extension into Firefox. Newer versions of ColorZilla claim you aren't required to restart Firefox once it is installed, but you might want to restart in any case.

After the extension is installed, you will notice a new eyedropper icon along the bottom left-hand corner of the Firefox window (Figure 5-2). To get a color profile, click the eyedropper and then move your mouse around the web page. The color stats for your current mouse position will appear along the bottom. When you have found a color you want to save, click the mouse to set that color. Alternatively, click the eyedropper to toggle out of eyedropper mode. If you have saved a color, you can either jot it down, or right-click on the eyedropper to be presented with the color in a number of formats. Click one of these formats to copy it to your clipboard so you can paste it elsewhere.

Figure 5-2. ColorZilla toolbar

On some web sites, you might find that it's difficult to hone in on exactly the color you want just because there are so many other colors surrounding it. Luckily, ColorZilla provides a zoom tool as well. Right-click on the eyedropper and choose your level of zoom from the Zoom menu. If you selected a higher percentage of zoom, the web page becomes more pixelated so you can more easily find the exact pixel you want.

You can use ColorZilla to set up your own color profiles. Right-click the eyedropper and choose Color Picker. A new window appears with a palette you can adjust to find just the right color.