Background Colors In HTML Email - Litmus

• Litmus
• Features
• Solutions
• Pricing
• Enterprise
• Tools
• Resources
• Discussions
• Snippets
• Templates
• My Account
• Sign In

• Community Home
• Discussions
• Learning
• Snippets
• Templates

Background Colors in HTML Email

• Posted by Jason Rodriguez

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](http://www.crockford.com/wrrrld/color.html) (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 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](http://24ways.org/2009/working-with-rgba-colour/) 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: ```

``` 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](https://litmus.com/blog/background-colors-html-email) on the Litmus blog.* #Further Reading [Rock Solid HTML Emails](http://24ways.org/2009/rock-solid-html-emails/) [Background Images and CSS in HTML Email](http://blog.mailchimp.com/background-images-and-css-in-html-email/) [Building a Rock-Solid HTML Email](http://www.campaignmonitor.com/resources/will-it-work/guidelines/) [The Ultimate Guide to CSS](http://www.campaignmonitor.com/css/)

Login to leave a comment ×

Sign in to Community

Use your existing Litmus login to connect with the world’s most amazing email designers.

Having trouble signing in? Try Forgot password

Join the Litmus Community

× ×

Forgot password

Enter your email address to reset your password

Already have a Litmus login? Sign in