ColorZilla Browser Extension for Firefox

Yet another way to explore colors is to use the ColorZilla browser extension for Firefox. This is one of my favorite ways to pick up colors as Firefox is always handy.

Once installed, Colorzilla resides down in the left, bottom corner of Firefox. You’ll see a little eye dropper icon. Click the eyedropper and the mouse pointer changes to a cross hair. Hover over any spot on the page and the RGB and #hex values are noted at the bottom of your browser. Click again and the color values are stored temporarily until you click on the eyedropper again.

If you leave the current tab and come back you’ll note that the color values have disappeared from the bottom bar, but they’re not really gone. Right-click the eyedropper and you’ll be presented with a menu of choices.

Right-click menu for ColorZilla Firefox browser extension.
Right-click menu for ColorZilla Firefox browser extension.

Have fun exploring all the features of ColorZilla, but take note that the details of the last color picked are ready for you to copy in your favorite format.

The Options menu has a hidden feature that you might want to check out:

ColorZilla Firefox browser extension options menu.
ColorZilla Firefox browser extension options menu.

Right-click on the eyedropper, click on Options, then click on Statusbar Format…. Here, you can modify the information that you see in the bottom bar of the Firefox browser when you activate ColorZilla.

ColorZilla menu for statusbar formatting.
ColorZilla menu for statusbar formatting.

Now, along with color values, you can “see” elements of a webpage, their paths, URLs and distances to other page elements.

A great feature that I must point out is the Webpage DOM Color Analyzer that you can reach from the Options menu. Visit a page where you like the color scheme, right-click the eyedropper and choose the Webpage DOM Color Analyzer…. A window at the bottom of the screen will show the main colors of the page, but not from the images on the page. Clicking on any of the colors in the palette will show you the css rules that are using that color.

ColorZillla – what a neat way to explore a page and all its colors!

Get Your Colors in a Widget for Your Homepage or Blog

Into widgets? Get all the colors you want by posting the Farbtastic Widget to your favorite site, or put it right on your desktop.

Don’t have a site yet? Post your widgets to iGoogle, a Google “homepage” that you can modify as you see fit. Click on the iGoogle link at the the top right of and you’ll see a version of google that you can modify to your liking by arranging tabs and blocks of content.

Here’s the widget I’m talking about:

Try moving either color pointer and see the resulting color and #hex value in the top box.

On the widget’s page at widgetbox, look under Get Widget on the right side of the page. If you’re not familiar with some of the icons, just hover your mouse pointer to get a tool tip that tells you the name of the site that the icon represents. Click on “more…” to see other icons. Here, you can also choose your language and modify your widget, if possible. Code is available for WordPress blogs – just look for the big W in the icon list.

To post the widget at iGoogle, click on the big G icon. A small window pops up that directs you to click on the “Add Widget” button to open the iGoogle installer. When the installer page opens click on the “Add to Google” button. Your new iGoogle page opens with the new widget displayed. Drag and drop the widget into the place you prefer and make sure to sign in to Google to save your page.

Same thing with WordPress. Add your favorite widget to a post or put it in your sidebar.

The only catch here is to grab the right code. If you take the code from one of the icons presented, the widget will be in its default state. Should you modify or customize your widget – like I did with Farbtastic by changing the language to English and enlarging the widget to 300 x 300 px – make sure to click on the small “Get Widget” button that has a little checkmark – it’s right below the customize part of the Get Widget section. Post your customized widget and make sure it’s what you want before you finish up with widgetbox.