3 Indispensable Firefox Extensions for Web Designers
During my limited tenancy as a web designer, there were a couple constant annoyances that were like thorns on my side:
- Figuring out HTML / RGB color codes when developing and styling pages.
- Finding out the proper sizes to scale images to, depending on the nature and content of the page.
Granted, there are workarounds: for #1, you can simply hit PrintScrn to take a screenshot of the page (Command-Shift 3 or 4 on a Mac), and load it into any image edit application for analysis. #2, you’ll have to do a bit of guesstimate work and hope you’ll get it in a couple of tries.
There must be a better way of doing things – and there are. Being an avid Firefox user, I discovered two awesome extensions that made life good again – ColorZilla and MeasureIt.
ColorZilla is essentially your familar eye-dropper tool that gives you the color code of the item on-screen that you click on. It returns the color code in RGB as well as Hex, with the added bonus of auto-copying the color code onto the clipboard for pasting. There’s also a pretty cool Webpage DOM Color Analyzer, which shows you a palette containing a range of color used on the current webpage.
MeasureIt lets you draw a box overlay on any webpage and tells you the the width and height – perfect for any kind of layout work.
So there you go – two simple extensions that makes life a lot easier!
Just a note – you can find both extensions through the Firefox Add-on Browser, however at the time of writing MeasureIt is not supported by Firefox 3.6. You can still install it through the author’s website though.

