Thursday, March 28, 2024

ColorZilla, a Firefox Extension for Web Development

We last looked at the Pixel Perfect extension for Firefox. This time we’re going to look at ColorZilla, a Firefox extension that functions as a color selector with features that mimic those of Photoshop and other image editors!

screenshot of Firefox ColorZilla extensionThe ColorZilla extension for Firefox is a color selector with features that mimic those of Photoshop and other image editors. The extension offers three ways to choose colors: Color Picker, Eyedropper, Palette Browser.

I find this an invaluable tool! Makes me want to kiss developer Alex Sirota on the mouth. (Can you say restraining order.) Beats browsing to a color palette website or opening Photoshop just to pick colors.

When refining a site design — especially one for a content management system (CMS) — all you need is Firefox loaded with Firebug and a couple add-on tools. You can do all of your tweaking from your browser. Since you can change your custom CSS code directly from Firebug, technically there is no need to even open that file. (Learn more by reading “Firefox and Firebug: A Developer’s Swiss Army Knife”, from the HTMLGoodies.com archives.)

Simply click the browser taskbar icon (arrow) to deploy ColorZilla.

COLOR PICKER

The Color Picker lets you select precise colors by pinpointing on the hue/saturation canvas. Alternatively, you could enter RGB, hexadecimal, or HSL/HSV value to show a graphical representation of the color.

screenshot of Firefox ColorZilla extension

You can give this selected color a unique name for future reference, perhaps naming it for your client who uses it. I have a client who uses a lighter shade of black for text and background colors. So, “OPC Black” would be a suitable reference name.

Also, notice the “Add to Favorites” option. Nice.

screenshot of Firefox ColorZilla extension

All of the color selection modes share the above-referenced features.

EYEDROPPER

Gotta love the eyedropper. I often use this for selecting accent or link colors from a client logo. Want to know the exact blue of Tiffany & Co? Go (lightly) to their website and use the eyedropper to read the color.

screenshot of Firefox ColorZilla extension

Look but don’t touch. The precise color, “Tiffany Blue”, is trademarked. (What the what?! How is that even fair!) Pepsi red — to you it’s dead. John Deer — don’t go near. Step away from the Cadbury purple. What, you thought I was going to rhyme “purple”.

Learn more about trademarked colors, in general.

PALETTE BROWSER

Okay, so a blue, a red, and a purple are out…that leaves you only 16 or 17 million others from which to choose. Open the ColorZilla Palette Browser to make your choices less overwhelming. Palette Browser will start you off with 289 hues/saturations.

screenshot of Firefox ColorZilla extension

CONFIGURATION

ColorZilla even offers configuration settings to make your experience more pleasurable…er, practical. From the taskbar menu, select “Options” and have at it.

screenshot of Firefox ColorZilla extension

Summary

Did I mention that I love the ColorZilla Firefox extension? Oh, right.

Installing the add-on is as simple as clicking the “Add to Firefox” (or “Download”) button of the ColorZilla download page, then clicking Firefox’s menubar {Tools | Add-ons} to complete the installation and enabling. To deploy, click the ColorZilla icon/arrow on the browser taskbar.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured