The Best Way to Code Background Colors for HTML Email
Ever get so frustrated with coding HTML email that you start seeing red? In the past couple weeks we’ve heard from a handful of red-eyed users reporting Gmail tests that are seeing black by showing up in inboxes with a black background (when that wasn’t your intended result!)
After digging into some testing, I realized that this issue isn’t limited to Gmail—in fact it affects a number of different clients depending on how you apply background colors in your code. As with anything HTML email related, this can be super frustrating since standard web code won’t always work the way you anticipate when sent to an email client.
Read on to get the scoop and find the one fail safe way to code background colors for consistent results across the board.
How to code a background color? Let me count the ways…
Usually, background colors are applied to a few common HTML elements: <body> <table> <td> <div> and <a>. Depending on your experience and coding style, you might use one of six (yes, six) different ways to apply background colors to elements in your email:
- Using the HTML bgcolor attribute with a 3-digit hexadecimal color code
- Using the HTML bgcolor attribute with a 6-digit hexadecimal color code
- Using the HTML bgcolor attribute with an RGB color value
- Using the background-color CSS property with a 3-digit hexadecimal color code
- Using the background-color CSS property with a 6-digit hexadecimal color code
- Using the background-color CSS property with an RGB color value
Since we’re talking about HTML email here, I’m going to skip over any discussion of the pros, cons or merits to each method. Suffice to say there are a lot of variables here!
Three digit HEX codes in email
I discovered right away that using 3-digit, or shorthand, HEX colors are not a great idea. When 3-digit HEX codes are used in <table> and <td> tags, black (or sometimes blue!) backgrounds result, with no regard to the color specified:
RGB values in email
RGB values didn’t fare much better, resulting in a few lovely shades of green (despite specifying values for white and gray):
In some cases, RGB values used with the HTML bgcolor attribute didn’t show up at all.
The best way to code a background color
After all the tests were completed, the verdict was in. The most reliable way of coding background colors is to use the HTML bgcolor attribute with a 6-digit HEX code:
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”600″ bgcolor=”#ffffff”>
<td bgcolor=”#ffffff”>
Of course, there are dozens of factors involved. Depending on the specific breakdown of the mail clients your audience is using, CSS background-color with a 6-digit HEX code is very reliable as well. The HTML bgcolor attribute simply has the best support across the board. While some methods work consistently in certain elements, I’d personally prefer to stick to one background color strategy rather than trying to keep specific background color quirks straight. For simplicity, old school HTML and 6-digit HEX codes are where it’s at.
Testing methodology
I ran the tests used as the basis for this article using Firefox 10, Chrome 16 and Internet Explorer 9 (both PC and Mac where appropriate). I manually checked Gmail (both old and new UI versions), Hotmail, AOL and Yahoo, and used Litmus’ Email Previews to check rendering on desktop and mobile email clients.
Tools for understanding your audience and testing display quirks
You can run your own tests to check rendering and display in 30+ email clients in just a few minutes with Email Previews from Litmus. Before testing, be sure you know which clients your subscribers use most often by running Email Analytics on your next campaign.
Sign up for a free 7-day trial of Litmus today!
