Blending Adsense Ads With Your Site

You’ve probably heard that it’s a good idea to blend Adsense ads in with your site, so they don’t stand out. The default Google palette for Adsense ads looks nice, but the blue color scheme really stands out too much if your site is all greens and yellows.

But actually blending the ads with your site’s colors can be a bit confusing, so here’s a tutorial. When you’re creating Adsense ads, you get to specify the colors for the border, title, background, text, and URL. But you can either choose from a set list of colors, or you can type in a strange mix of letters and numbers.

Choosing from the set of available colors is pretty much useless. You might get close to your site’s colors, but it probably won’t be an exact match. After all, there are only 55 set colors to choose from, and thousands of colors for site designers to choose from.

So that leaves you typing in numbers and letters.

Those numbers and letters are called the RGB value, which stands for Red, Green, and Blue. An RGB value is actually a series of three two-digit numbers. In this case, the digits are in a numbering system called hexadecimal, where the digits are 0 through 9 and A through F. So FF is a valid hexadecimal number.

The three components of an RGB value specify how much red is in the color, how much green, and how much blue. All zeros means that the color is black, all FFs means that the color is white.

How do you figure out what you need to type in? The easiest way is to use a color grabbing program that lets you pull the RGB value straight off your web site.

If you have an advanced graphics editing program, it probably has a color grabbing tool in it (it usually looks like an eye dropper). You’ll have to use the Print Screen button to take a screen capture of your web site, then paste that into your graphics editing program to be able to grab colors from it.

If you don’t have a graphics editing program that will give you RGB values when you grab a color, then you can download a free color grabbing program. This one is pretty popular, although I’ve also used this one.

However you do it, what you’ll end up with is a way of pointing to a specific part of your site, and getting the RGB value for the color at that point.

Adsense Color Palette Here’s how you’re able to edit the colors Google will use for an Adsense ad. What we want to do it match each of these colors to the colors on your site.

Now that we have a way to grab a color from the screen, we can pretty easily do that. You’ll copy and paste RGB values you grab from your web site into the edit boxes for the ad colors.

Adsense Sample Here’s an Adsense sample ad, with the various colors shown. Note that whatever color you choose for the border is also used for the area around the “Ads by Google” disclaimer.

The hardest part of this entire process, for me at least, is figuring out what colors on my site need to go into which areas of the ad. Here’s the process I run through.

I first pick the spot on my site where I want the ads to appear. That may be in a sidebar, at the bottom of posts, or wherever. That spot will have a background color already defined in my site’s theme. I use the color grabber to get the RGB value for a spot in the background where I want the ads to go, and copy and paste that into the Background field in the ad palette. The background color will generally be white (FFFFFF) if you’re putting ads in posts, but it depends entirely on your site’s theme.

The next bit I work with is the border. Again, I look at my site, around the area where I want to put the ads, and see if any of the theme’s elements are surrounded by borders. I’ll use the color grabber to get the RGB value for those borders and use that as the ad’s Border color. If there are no borders, then I use the same color as the background.

The title color should be the same color that all other hyperlinks are on your site. Normally the default in Adsense is fine, but if your site’s theme has changed the color of hyperlinks, you’ll want to grab that color and use it as the ad’s Title color.

Same with text color, use whatever color text is in the spot where you want to put the ad. In posts that’s normally black (000000), but again your site’s theme might change that.

The URL color is pretty much just up to your own personal preference. You general don’t want it to appear as a clickable link, even though they can click it. Google’s default colors tend to understate the URL, so I usually go with a color a bit grayer than the normal text color. The default works well on a lot of color schemes.

By the time you finish this process, you should have an Adsense ad block that looks like it was custom designed for your site. And if you click on the “Save as new palette” link, you’ll be able to choose this same color scheme for future ads without going through the entire process again.

9 Replies to “Blending Adsense Ads With Your Site”

  1. You know, I haven’t tested this, and was surprised to realize when I saw the question that I didn’t even think about testing it. Which is odd, since I’m a testing advocate.

    I finally realized that I have a personal bias against sites that look “unprofessional”, and to me sites with Adsense ads that are radially different from the site’s theme seem unprofessional.

    So thanks for the poke, I’ll do some testing and see what happens to the CTR for the ads.

  2. I’ve just started running some Adsense within posts – fortunately the standard palette is close to my template, so I didn’t bother changing colours. I will be interested to see if these ads do better than ones I’ve usually run in the sidebar.

  3. No results yet. Taking a look at your site, I’d say you have to expand your posts quite a bit. Right now the amount of actual content in most posts is very small, and you have Adsense blocks at the beginning and the end. It’s a bit much because there isn’t enough content between them, so they’re both visible at the same time. Or maybe try removing one of the Adsense blocks, and see if your CTR goes up.

  4. @ Miracle Blade

    Looking at your site you seem to only be using link units. While these are a useful addition in tight spaces they have a much poorer CTR that normal AS blocks. This is because the user has to click twice before you get paid.

    I seem to remember that the 250×250 block is one of the best for CTR. I like the 468 myself.

    Jay, I was only thinking the other day that split testing some different formats might bring some useful information. Looking forward to your results.

  5. [quote post=”516″]Jay, I was only thinking the other day that split testing some different formats might bring some useful information. Looking forward to your results.[/quote]

    That’s a good idea. I’m currently gathering two weeks of baseline data for blended ads on one of my sites, and will (in a few days) switch to non-blended ads on that site for a couple of weeks to see how the CTR changes. I’ll plan on playing with ad formats next (I’m using the 250×250 block right now).

  6. When trying to match the background on my adsense code, how do I use only 2 digits? The background image I’m trying to match it to is #ee, but the closest I can get with google is #eeeeee, because it requires 6 digits.


  7. Hi Andy, colors are always 6 digits (2 each for quantities of red, green, and blue). So #ee isn’t a full color value. You could try using zeroes for the last four digits, but that would give you a pretty bright red. If that isn’t the background color you’re looking for, try one of the programs I linked to that tells you the color of any pixel on the screen.

Leave a Reply