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:

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

7/23/2011

4 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. UnknownJul 23, 2011, 7:10:00 AM

    Firefox add-on is just great.this result in awesome looking pics.
    And plz mohd tell me when your main post data becomes short and sidebars items become large,your rsidebar and lsidebar comes in middle below post.how will it happen,plz tell me the code by commenting. see this pic. also.
    http://2.bp.blogspot.com/-mq020rAkaYU/TiotDdEA97I/AAAAAAAAA5M/NWNAX_iqir8/s660/demonstarte.PNG

    ReplyDelete
  2. Mohammad Mustafa AhmedzaiJul 24, 2011, 12:15:00 AM

    @Karan

    Thanks pal. This mid sidebar columns align to left because I have not added them in separate div sections separate from the sidebar column at the top. Therefore when there is space to the left they align themselves to left.
    Sharing a code will not be helpful because different areas needed to be edited which will be difficult to explain via a comment with no screenshots

    ReplyDelete
  3. UnknownJul 24, 2011, 7:53:00 AM

    @Mohammad Mustafa Ahmedzai
    so mohd_ what will i do for aligning them to left.Can i send you my template or plz tell me the process.

    ReplyDelete
  4. UnknownDec 1, 2013, 8:29:00 AM

    Thanks Muhammed. Very useful tip

    ReplyDelete

Subscribe to: Post Comments ( Atom )