ColorZilla Help
Contents
Eyedropper
- Click on the ColorZilla icon
or press the eyedropper shortcut key to start the eyedropper mode.
- Go over the pixel you want to sample and click on it or press the eyedropper shortcut key again.
- The monitoring stops and the last sampled color value is remembered.
- You can sample several colors by holding the Shift key while clicking on the target colors. The sampling isn't stopped and the sampled colors are saved in the History palette.
- The default eyedropper shortcut key is Shift+Escape.
- If the sampled color is one of a dynamic element (like a hovered link) and you want the original color, choose "Resample last location" from the main menu.
- The page contents can be Zoomed in and out using the "Zoom" option. Zooming the page will make color sampling from small icons or fonts easier. With Firefox 3, this will use the new Full Page Zoom feature for improved zoom quality.
- You can Pan the page without using the scroll bars by pressing Alt+Shift and dragging the page with your mouse. This can be useful with large zooms.
back to the Contents
Color Picker
- Double click on the ColorZilla icon or choose in the 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/V) to build 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.
- The resolution of the Color Picker palette can be changed using the menu.
- Greater resolution will give better color precision, but will make the Color Picker slower.
back to the Contents
Palette Browser
- The Palette browser is located inside the Color Picker dialog. Open the Color Picker and choose the tab.
- Choose the wanted palette from the drop-down list.
- Palettes can be viewed either as thumbnails or as a list of colors.
- In the List view, you can sort the colors by their indexes inside the palette, by their gray levels and by name. Just click on the appropriate listbox header to sort by that column.
- You can click on a color or choose it from the list to make it the current Color Picker color.
- User-created palettes, along with the History and Favorites palettes can be edited. The context sensitive menu over the palette will allow you to remove individual or all colors and save the palette under a different name.
- All the palettes are saved in the Palettes Folder. To access this folder click on this icon
. You can manually add or remove palettes from this folder, or edit any palette using a plain text editor. ColorZilla palettes are fully compatible with GIMP palettes.
- Clicking on will take you to the ColorZilla Palettes page. This page has additional palettes and links to other palette related resources.
- System CSS Colors palette is a special dynamic palette. CSS standard color names like ActiveBorder, ButtonShadow etc. reflect the colors of the various UI elements of the user system.
back to the Contents
Webpage DOM Color Analyzer
- Launch it from the main ColorZilla menu
- Allows you to analyze DOM element colors on any Web page and create a corresponding palette
- You can locate elements on the page that correspond to a given color, by hovering on any color
- Find out what CSS rules specify a given color, by clicking on the color on the top palette
- For any CSS rule, click on the CSS file link to open the corresponding CSS file at the correct location
- You can save the colors as a ColorZilla palette
- The 'save in web services' and 'permalink' links allow you to view, bookmark and share the palette using the ColorZilla Online Palette Viewer
- You can remove any unwanted colors from the Analyzer palette (for example, before saving the palette) by clicking on a little 'x' icon inside the unwanted color.
back to the Contents
Online Palette Viewer
- Click here for an example
- Allows viewing, bookmarking and sharing any color palette
- Provides a permalink URL that represents any set of colors online
- Online Eyedropper shows colors in RGB, HSV and additional formats
- You can open the Online Viewer from the Webpage DOM Color Analyzer, or from the Palette Browser
back to the Contents
History Palette
- All the sampled colors are automatically saved in the History palette.
- The color name will be the element that the color was sampled from.
- To access the History palette, open the Color Picker, choose the tab, then choose from the palette drop-down list.
- When viewing the History palette you can remove individual colors, clear the palette and save it under a different name using the context sensitive menu.
- To save multiple colors to the History palette, hold the Shift key while clicking on the target colors in Eyedropper mode.
back to the Contents
Favorites Palette
- You can save your most often used colors in the Favorites palette. You can also use this palette to create new palettes, by first adding colors to the Favorites palette and then saving the palette under a new name.
- In order to add a color to the Favorites palette, either click on the "Add to Favorites" icon
in the Color Picker dialog, or choose from the main menu.
- When adding a color to the Favorites from the Color Picker, you can give it a custom name in the color name entry box before clicking on the "add" button. The color will be saved with this name in the Favorites palette.
- To access the Favorites palette, open the Color Picker, choose the tab, then choose from the palette drop-down list.
- When viewing the Favorites palette you can remove individual colors, clear the palette and save it under a different name using the context sensitive menu.
back to the Contents
DOM Spying Tools
- ColorZilla can display the following DOM information about the element under the cursor:
- element tag, class and id
- mouse position relative to the element
- css calculated size of the hovered element
- box object size of the hovered element
- the DOM path to the hovered element
- To choose what information is displayed, enter an appropriate format string in
- ColorZilla can outline current elements when hovering over them. Enable to turn this on.
- You can measure distances between any two points in your window.
In eyedropper mode, click on any point in your browser. Enter the eyedropper mode again - the status bar will display the distance between the current point and the previously sampled point.
Make sure that the %dist% variable is a part of you status bar formatting string in order to see the distance measurements.
- Use the or main menu option to open the DOM Inspector or Firebug with the last element you selected.
back to the Contents
Options and Configuration
- The main menu is the context sensitive menu of the ColorZilla icon at the status bar.
- You can hide the ColorZilla icon and restore it when needed using the eyedropper shortcut key (the default is Shift+Escape).
- Auto-copy - you can configure ColorZilla to automatically copy the sampled color value to the clipboard. Select and choose you preferred color format.
- You can set which information appears on the status bar when sampling. Select . In the entry box, type any text you want to appear on the status bar. The variables (%var%) will be substituted by their real values. The available variables are:
- %rgb% - RGB value
- %hsv% - HSV value
- %hex% - Hex value
- %element% - element tag, class and id
- %css-size% - element css calculated size
- %box-size% - element box object size
- %rel-pos% - mouse position relative to the element
- %dist% - distance from last point
- The tooltip of the main icon contains information about the currently selected color.
- You can use the "Copy..." menu entries to copy the sampled color to the clipboard using various formats.
- The Color Picker resolution can be changed using the menu. Greater resolution will give better color precision, but will make the Color Picker slower.
- The default Eyedropper keyboard shortcut can be changed in .
- Current element outlining can be enabled and disabled using .
back to the Contents
