ColorZilla : Color Picker, Eye Dropper & Color Gradient for Firefox

Choosing the right set of colors for a website is one of the most essential things that result in making an captivating site. Sometimes when we come across websites that have used very carefully picked colors and  right color combinations. This is when we wonder about the color codes that the site has been using.

An extension for Mozilla Firefox web browser called ColorZilla can help you get the answers to questions like this. It comes with a color picker, eye dropper, palette browser, website color analyzer, and a CSS color gradient generator. Using all of these tools we can find out everything about the colors that are being used on a website.


ColorZilla places an icon in the toolbar for the Firefox browser. As soon as you click on this icon, color picker become active. Now it tracks your mouse pointer and shows you the color code for the pixel under the pointer. It also displays the pixel location, RGB and Hex color values, as well as the CSS class used for the color.


The website analyzer is very useful to find all the colors used on a webpage. You have to simply select “Webpage Color Analyzer” from the ColorZilla menu. It will take a few seconds to analyze all the colors used through CSS on that webpage. In a short while, it will display you the color palette in use on that webpage. The color codes for any of these colors are displayed in hex code and RGB values.


The CSS gradient color generator tool is something that will take you to a different website where you can pick ready-made gradients or design your own gradients by picking the colors of your choice. It will generate CSS code for the gradient that works in Chrome or Firefox.

You can get the ColorZilla extension for Firefox from