How to Pick Up Colors from Any Point in a Web Page

How to Use Colorzilla to Pick Up Colors from Any Point in a Web Page

Category: How To


In designing a website, it is important that you know how to mix and match the colors of your website’s components (graphics, background, font style, ads, widgets, etc.) It adds to your website’s overall appeal when the components blend well with each other.


When I was at the design stage of this site, one of the problems I encountered is that the default color of my different widgets and Google adsense ads don’t blend with my chosen WordPress theme. Shown below are examples. The default WHITE background of the Google adsense ads don’t blend well with my theme. They’re just plain ugly!

To solve this, I have to identify the colors used in my themes so that I know what color to use for my widgets and Google adsense ads. In order to do this though, I still have to undergo a very tedious process which involves…

…capturing a screenshot of the page by pressing the Print Screen key and pasting it to Paint…

…opening the saved image in Adobe Photoshop and using the eyedropper tool to get the RGB color code of any point in the page…

… and going to a website that converts the RGB color code to HTML code like the one I have been using here.

color wheel

However, this is a very time-consuming process and requires a lot of patience.

In my search to make my job easier, I stumbled upon this wonderful Mozilla Firefox add-on called ColorZilla. Download the add-on here.

To use it, just click on the eyedropper icon located at the left side of the status bar and then move around the crosshair to any point on the page. Aside from the RGB and HTML color codes, other useful data are also displayed like the point’s X and Y coordinates and even the name of the element where it is located.

After picking up the color of that specific point, you can copy the color code by activating its pop-up menu.

Very easy isn’t it?

Here’s how my website looks like after the proper colors have been applied to my Google adsense ads.

It’s now clean eh? My website definitely looks better when the Google adsense ads blend with my theme and don’t exactly look like ads. Visitors here will have more tendencies to click on them which will give me a higher CTR (click-through rate). A higher CTR means more adsense earnings, hehehe…


Related Posts with Thumbnails If you want to receive my latest posts, please subscribe to my full feed RSS or have them delivered through email. Just enter your email address below and hit the Subscribe button.

Tags: , ,

9 Responses to “How to Use Colorzilla to Pick Up Colors from Any Point in a Web Page”

  1. ianemv Says:

    Good suggestion ark. will try that also..i have been using photoshop techniques and also mozilla’s add-on named firebug. firebug on the other hand, will show you on the right panel the styling used on the elements you selected.

    Ginagawa ko kasi is, inspect element then select the element to see its properties. Not really recommending firebug kasi it’s more of a developer’s tool tsaka magbagal talaga firefox mo when browsing..


  2. ark Says:

    @ianemv – developer’s tools nga talaga. It’s actually too complicated for me, hehe..


  3. Webbielady Says:

    Natural designers have their way in making thse designs anyway. I know I cannot make one for my site that is why I am always in the market in EC to hnt for designers. I have purchased one but I still have to see the result. ^^


  4. Downloader Says:

    I am doing that in my website since I’m an avid user of Photoshop.


  5. ark Says:

    @Downloader – well, it’s now time to use ColorZilla bro. Mas mabilis un.


  6. Downloader Says:

    This is kewl.. Colorzilla. It will ease our burden perhaps.


  7. girly myspace layouts Says:

    Hello webmaster I like your post !


  8. foxepless Says:

    This rocks! I found a lot of new informationhere and I liked it a lot. Good job! I will be back.


  9. Sports Says:

    This is a great little tool I needed one of these a couple weeks ago!


Leave a Reply