Until now you could right click -> view source on a page and then try and find the relevant section and take a look at the color codes there. This might take a bit long if there is a large css file and it may be confusing for those who don’t know anything about CSS. Alternatively you could take a screenshot, paste it into Photoshop or Paint.net and find out what color you’re looking at using the color picker.

Using the Colorzilla Firefox extension however brings you a lot closer to these colors. After installation you can find a small color picker on the bottom left. If you click on it once and click anywhere on the page you will get a lot of information. The latest version shows you RGB info, Hex color info, cursor position, and also the place in the CSS file where the color is.

The info is also shown in a very user friendly way, in the status bar at the bottom, so no pop-up dialogs (which I hate) and no need to click through menus. If you click on the icon twice you find a color palette where you can pick colors, perfect for comparing and picking close colors.

While I appreciate that this isn’t a tool for the masses, I found it extremely useful in the few cases I needed it, it saved me a whole lot of time and frustration.

Related posts

• Zoom In on Images in Firefox (6)
• Wordpress one click installation of plugins and themes (4)
• Webslices and Activities ported to Firefox (5)
• Webmasters: Analyse Your Website with YSlow (3)
• Web of Trust: collaborative online security (7)