Download: https://addons.mozilla.org/en-US/firefox/addon/271
Author Site: http://www.iosart.com/firefox/colorzilla/

Good website design is hugely influenced by good use of colour. It’s one of the first things that we notice when visiting a website, even if it is subconscious recognition. No one can deny that well designed colour schemes with a good balance of complementary and contrasting colours can greatly benefit the impression left on a website visitor.

In the past, if you ever came across a website with a colour or combination of colours that inspired, you needed to take a screen shot of the image, open it up in your preferred image editor and capture the colour codes. A cumbersome process at the best of times.

This is where ColorZilla comes in.

Instant Colour Picking

So what does it do? Well the premise is incredibly simple.

1. Upon installation of the Firefox extension you will notice a new icon of an eyedropper tool in your status bar.
2. Simply click on this and hover over any element on the web page you are viewing.
3. The status bar updates with colour code information as you hover over items.
4. Click on an item to lock the colour code in the status bar.
5. Finally to further speed things along, you can right click on the eyedropper tool in the status bar and select from a variety of RGB or Hex code formats – this information is copied to your clip board.
6. Switch to your programming or image editing software and paste the code in where it’s needed.

The ColorZilla site details more information on the functionality available with this extension, including zoom tools and more.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Alternatives?

I thought it would be worthwhile mentioning that Adobe Creative Suite applications do allow you to click and drag their eyedropper tool to other applications to select a colour, however the tool seems to fail if you need to Alt+Tab into the application from which you want to select a colour – a bit of a problem unless you have a dual screen setup.

Still, this is a useful tool, especially for the graphic designer. As my focus is mainly on coding I would most actively be switching between Firefox, Notepad+ and Style Master, our CSS editor of choice.