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.
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.
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.