Find out Background Colors Of Images and Fonts on a Website

find web element colorsI am sharing another of my favorite Firefox add-on that will help you find out the colors used on different sections by a website or blog. This add-on is know as colorzilla and it offers many options. You can pick up a color used on a webpage, you can also zoom a page and enlarge its size but the best thing I like about it is its selection option which gives you important information regarding the webpage div sections and CSS classes.  This tool comes with Advanced Eyedropper, ColorPicker, Page Zoomer and other useful options for web designers. Kindly first download it by clicking here.

How To Find Colors of elements on a webpage?

Once you install the add-on then restart your browser. This add-on will appear at the bottom of your status bar. Now whenever you want to find out the background color of any element or object used on a blog page simply Left click on colorzilla and then take your mouse cursor and click on that image or object. You can then right on colorzilla to copy the hexadecimal or rgb color code of the element. See these screenshots,

find color of web element

eyedropper

 

The above method activates eyedropper and if you wish to choose a color of your choice then double click on colorzilla and you will then have a wide range of colors to choose from.

color picker

How To Zoom out or Zoom in a webpage?

To Zoom a webpage simply right click in colorzilla icon and choose Zoom and then select the resolution in percentage like 300% 200% etc.

You will also enjoy this post: