Background Colors in Email
Coding emails can be a wildly frustrating experience. Even though email designers use the same technology as traditional web designers, the outcome of our coding decisions aren't always what were intended.
One of the most frustrating problems can be background colors in email. On the web, both the CSS background-color property and background shorthand property are nearly bulletproof. Many email designers take the same approach with background colors in email, with often times disastrous results.
So, what's the best method for using background colors in email? This article takes a look at a few options before determining the best approach.
Ways of Coding
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 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
While some designers that have been around since the early days of the web may use color names (like cornflowerblue or thistle), most designers today rely on either hexadecimal codes or RGB values.
3-Digit Hex Codes
Using 3-digit hex codes is a popular method in web design. It keeps code a bit shorter and easier to read, which can be helpful when you're staring at hundreds of lines of CSS. However, after testing, 3-digit hex colors turn out to be a terrible solution for email designers.
When used on table or td tags, 3-digit hex values are often not properly parsed, resulting in black or blue backgrounds in many email clients, regardless of what color was originally specified.
Although 3-digit hex codes are an ideal solution for many web designers, inconsistencies in rendering between clients makes this method a no-go for email designers.
RGB values don'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. Naturally, since RGB values don't work well, their even more useful sibling RGBA has even less support in email design.
The Best Solution
It turns out that the most reliable way of coding background colors is to use the HTML bgcolor attribute with a 6-digit hex code on the table and td level:
<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 on certain elements, sticking to one background color strategy is easier than trying to keep specific background color quirks straight. For simplicity, old school HTML and 6-digit HEX codes are where it’s at.
Article originally appeared as The Best Way to Code Background Colors for HTML Email on the Litmus blog.