Integrating Your Adsense Ads with Your Site and Using ColorZilla

If you are running Adsense Pay-Per-Click ads on your site, it is usually adviseable to blend the colors in with the rest of your site so that your ads don’t distract, detract from your design, or scream “I’m an Ad!”

A general rule which usually works for me is to keep the background color of my ads the same as the background color surrounding them, the text and URL the same color as the text on the page, and the title the same color as the links on the page.

This point of keeping all of the text of the ad the same color except for the title comes from Michael Cheney.  In regards to integrating ad colors with the rest of your site, this advice comes from both Michael Cheney and from Google.  It also makes sense.

I found it could be time consuming to try to figure out exactly what colors were being used on my site, particularly when I was using a WordPress Theme.  And then if I changed the theme I would have to go through the whole procedure again, of changing my ad colors.

Here are some tips on how to streamline this process.

1.  Use Firefox as your browser, if you don’t already.
2.  Go to https://addons.mozilla.org/en-US/firefox/addon/271 and get the Firefox Addon for ColorZilla.  Download and install.
2.  Before you set up your Adsense Ads, go to Adsense Setup -> Color Palate.
3.  Create a Color Palate for each specific blog or site.  For example, if your site is “www.mynewinfosite.com,” create a Color Palate and name it “My New Adsense Site.”

This is so that if you want to change your site’s coloring or theme later on, you won’t have to edit all of your ads, you will only have to
change that one color pallate.

4.  In order to choose the colors for your palate, go to your site and theme.  Right Click and go to ColorZilla -> Eyedropper.

5.  Hover your cursor over each item whose color you need to copy (background, links, and text).  When you hover over a page element, the color of that element will show in the status bar of your browser, near the bottom left area of your screen.  This will be a string of 6 digits, letters and/or numbers, such as “006DA3″

6.  In your Adsense account, Input that number into the appropriate field of your Color Palate settings.

7.  Rinse and repeat with every color of your pallate, and then save your pallate with the name you have assigned to that site or blog.

8.  Then go to “Get Ads” in your Adsense account.  Set up your ads as usual, but when you get to the color assignment step, assign the color pallate that you created for that blog.  Do the same with all of your ad units.

9.  In the future, if you change the coloring or design of your site, you can simply change the color palate that has been assigned to that site.  The changes will automatically reflect on all the ads it has been assigned to (after a lag of maybe 10 minutes).

Notes:

- When you create a color pallate in your Adsense account, you are not limitted to the colors that are presented to you in their color picker.  if you input the correct 6 digits, you will get the color you want.

- Obviously, if your site or blog has different themes or designs in different sections, you would create more than one color pallate for that site and name it appropriately.

- If you are looking for a good way to integrate Adsense Ads into your posts on WordPress blogs (as opposed to just having them in the sidebars) I recommend the Adsense Injection plugin.