« Back to Fireday

ColorZilla

March 21st, 2008 at 9:30pm — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox pointLink

If you're a designer, you've more than likely found a web site where the color hits you as soon as you enter the site. One of the hard things to achieve is guessing the color used throughout the site.

This weeks extension provides the ability to see and extract that color from a web site to use in your own site without digging into the HTML or CSS.

This weeks' review is ColorZilla.

Overview

ColorZilla is more than a just a color extension. Even though there is a visible advanced eyedropper when installed, it also includes a colorpicker, page zoomer, and an online color palette viewer.

Installation

Even though the extension is weighs in at 161k, it still has a lot of functionality. The cool thing about the extension is that after it's installed, it's positioned at the far left of Firefox's status bar, out of the way of every other extension on the far right.

ColorZilla appears as a color eyedropper icon on the far left of the Firefox status bar.

Features

ColorZilla's list of features include the following:

  • Advanced eyedropper
  • Color picker/color palette browser
  • Web Page DOM Color Analyzer
  • Page Zoomer

First up is the eyedropper which is visible in the bottom left corner of the status bar. Left-click on the eyedropper and proceed to move over a color on a web page. Left-click on the color and the color's hex code will appear next to it. It will only identify colors on the web page. This feature alone saved me loads of time when I was searching for a color code in CSS or HTML code.

Next is the color picker/color palette viewer dialog. The color picker tab is an easy way to view colors on a color block and adjusting the hue, saturation, and value with the red, green, and blue values. If you know the color already, just enter the hex color in the edit box and your color appears for fine tuning and adjusting.

ColorZilla Color Picker

On the palette browser tab, you can look over your selection of color palettes saved by the DOM Color Analysis Results or from your custom colors you selected from a web page.

Speaking of the DOM Color Analysis, this is the second feature that makes this extension worthwhile. Right click on the eyedropper icon and a context menu appears. Select the Web Page DOM Color Analyzer option. ColorZilla will analyze the page and produce a nice display of colors used on the web page in a web panel at the bottom of your browser.

Lastly, the page zoomer allows you to scale your web pages up or down. This feature isn't that big of a deal and can be achieved by using the Firefox's Ctrl-Mouse Scroll technique, but it's a nice feature nonetheless.

Configuration

There currently isn't a configuration screen for ColorZilla. Everything is strictly run by the context menu in the left-hand corner. Right-click on the eyedropper icon and select "Options." All of your options are displayed in the menu with some menu items used as checked preferences.

This is a clean and easy way to make your options quick and painless.

Conclusion

For designers, this is one of those extensions that you have to have in your Firefox extension collection. During a tour of the web while working with a client, you could easily add colors to a palette that your client likes for their web site.

The ColorZilla extension is to designers what the Web Developer extension is to programmers. This extension provides all of the necessary features for a professional web designer to travel the Internet and find those color palettes that will dazzle and amaze their clients and audience.

ColorZilla receives a rating of 5 out of 5 this week.