ColorZilla for Firefox Help


  • Click on the ColorZilla toolbar icon
  • On Windows, the eyedropper is activated automatically - go over the pixel you want to sample and click on it. On Mac and other platforms, select "Pick Color From Page".
  • The monitoring stops and the last sampled color value is remembered.
  • If the sampled color is one of a dynamic element (like a hovered link) and you want the original color, click on the main ColorZilla icon again and choose "Resample last location".

back to the Contents

Color Picker

  • Select Color Picker from the main ColorZilla menu to open the Color Picker with the currently selected color.
  • Manipulate the color either by directly modifying its components in the edit boxes, or by clicking on the color palettes.
  • Choose the radio buttons near the color components (R/G/B or H/S/B) to get a palette based on that component.
  • Use the narrow palette to change the selected component value, and the main palette to change the other two.
  • You can copy the current color values directly from the entry boxes in various formats and paste them elsewhere.
  • Press "OK" in the Color Picker to accept the selected color.

back to the Contents

Webpage Color Analyzer

  • Launch it from the main ColorZilla menu.
  • Allows you to analyze DOM element colors on any Web page.
  • You can locate elements on the page that correspond to a given color, by hovering on any color.
  • Select any color as the current ColorZilla color by clicking on it and then on the 'Ok' button.

back to the Contents

History Palette

  • All the sampled and manually selected colors are automatically saved in the History palette.
  • The History palette is currently part of the Color Picker panel.

back to the Contents

DOM Inspection Tools

  • ColorZilla can display the following DOM information about the element under the cursor:
    • element tag, class and id
    • dimensions of the hovered element
  • ColorZilla can outline current elements when hovering over them. Make sure Options > Outline Hovered Elements is enabled to turn this on.

back to the Contents

Options and Configuration

  • Auto-copy - you can configure ColorZilla to automatically copy the sampled color value to the clipboard. Select Options > Auto Copy > Enabled and choose you preferred color format.
  • You can use "Copy Special..." under the main menu to copy the sampled color to the clipboard using various formats.
  • Current element outlining can be enabled and disabled using Options > Outline Hovered Elements.
  • You can disable to automatic starting of the eyedropper when the main ColorZilla icon is pressed.

back to the Contents

Install ColorZilla

Online tools

CSS Gradient Generator






Version history


See also


Share and follow


Please send us your comments, suggestions, questions or bug reports.