As an amateur HTML and CSS enthusiast I see colors and schemes that I really like sometimes and when I’m trying to find the best colors to suit my sites I want to try these out. It’s usually very fiddly to find out these colors without special tools, but I have found a great Firefox extension to do the work for me.
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.
Another option that you have is to press F12 to open the built-in developer tools to find out more about specific elements on the page this way.
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 when you click on the extension icon in one of the browser’s toolbars.
If you click on it once and move the cursor 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.
You can click at any time to copy the hex code of the current color to the clipboard.
The info is also shown in a very user friendly way at the top of the page 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.
Update: ColorZilla is now also available for the Google Chrome web browser.