ColorZilla for Chrome Help

Contents

• Eyedropper
• Colour Picker
• Webpage Colour Analyser
• 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 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