ColorZilla for Firefox Help

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 Colour From Page".
  • The monitoring stops and the last sampled colour value is remembered.
  • If the sampled colour is one of a dynamic element (like a hovered link) and you want the original colour, click on the main ColorZilla icon again and choose "Resample last location".

back to the Contents

Colour Picker

  • Select Colour Picker from the main ColorZilla menu to open the Colour Picker with the currently selected colour.
  • Manipulate the colour either by directly modifying its components in the edit boxes, or by clicking on the colour palettes.
  • Choose the radio buttons near the colour 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 colour values directly from the entry boxes in various formats and paste them elsewhere.
  • Press "OK" in the Colour Picker to accept the selected colour.

back to the Contents

Webpage Colour Analyser

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

back to the Contents

History Palette

  • All the sampled and manually selected colours are automatically saved in the History palette.
  • The History palette is currently part of the Colour 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 colour value to the clipboard. Select Options > Auto Copy > Enabled and choose your preferred colour format.
  • You can use "Copy Special..." under the main menu to copy the sampled colour to the clipboard using various formats.
  • Current element outlining can be enabled and disabled using Options > Outline Hovered Elements.
  • You can disable the automatic starting of the eyedropper when the main ColorZilla icon is pressed.

back to the Contents

Install ColorZilla

Online tools

CSS Gradient Generator

Sponsor

Documentation

Features

Help

Screenshots

Version history

Translate

See also

Flickriver

iosart.com

Share and follow

Feedback

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