1. Figuring out HTML / RGB color codes when developing and styling pages.
2. 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.

No related posts.