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