How to Use a Firefox Plugin for Web Colors

Do you ever see the perfect color or color scheme in a website and wish you could use it in your own web projects? There's a Firefox plugin that will make it easy for you. Here is how to work with it.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Firefox browser
• The ColorZilla plugin

1. Download the plugin, ColorZilla (see Resources below). When installed in Firefox it provides you with an eyedropper tool that can sample the color of any pixel on your screen. The eyedropper tool is located on the left side of the status bar. Simply click it to use the eyedropper to select a color. After you click a color with the eyedropper tool, the status bar displays the color information.

2. ColorZilla menu

   Right-click (ctrl-click on a Mac) the icon in the status bar to see the menu. Or simply double click the ColorZilla icon in the status bar. Included in the popup menu are options to copy the color values in one of a number of formats that can be pasted into Photoshop, Fireworks, Paint Shop Pro or any other image tool you use.

3. ColorZilla color picker

   Open a color picker from the menu. In the color picker there are two tabs: one for picker and one for palettes. You can adjust the color as needed with the color picker tool.

4. Color Picker options

   Explore other menu options with the color picker that include history and favorites, as well as ways to find more palettes.

5. ColorZilla DOM analyzer

   Choose Webpage DOM color analyzer to get the entire color scheme for a page. You get the entire set of colors, which can be saved in various ways.

Resources

• ColorZilla Download