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.

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…

Please read my related posts:

1. How to Make $1000 a Day in Google Adsense There are many ways to make money online. Personally, I integrate Google adsense ads in my web site to earn...
2. Web Site of the Day: Lesbians Who Look Like Justin Bieber Some people just can’t stop hating Justin Bieber. All throughout the year, rumors pertaining to him has dominated Google trends...
3. How I Got Banned From AdSense They say some good things never last. I now believe it. My love affair with Google Adsense began in August...
4. My First Infolinks Payout For my making-money-online venture, I don’t rely just on Google Adsense alone. Yes, Adsense is my bread and butter but...
5. Web Site of the Day: Cats That Look Like Hitler Does your cat look like Adolf Hitler? Do you wake up in a cold sweat every night wondering if he’s...

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: adsense, colorzilla, google