ColorZilla for Firefox Help

Contents

• Eyedropper
• Color Picker
• Webpage Color Analyzer
• History Palette
• DOM Inspection Tools
• Options and Configuration

Eyedropper

• 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