Design tips for using background colors in email

Brands often rely on product images and graphics to provide visual interest in email. But as we’ve discussed on this blog before, another great tactic to liven up your email‚ÄĒwithout throwing off your image-to-text ratio or increasing your message size with images‚ÄĒis by using background colors. Background colors¬†can organize content, establish hierarchy, and, when used behind images, can¬†reinforce your design even with image-viewing turned off. Plus,¬†HTML background colors render across all inboxes (unlike images), take up less than one line of code, and are¬†easy to implement (in the BEE editor, no coding is required).

Often,¬†emails maintain a white background and reserve color blocking for headers and footers, visually separating intro and outro content from the body of the email. That’s the approach General Assembly takes, for example,¬†in this email we previously featured¬†on the Email Design Workshop blog:¬†General Assembly email design semplicity tips

Using a¬†simple color palette¬†and incorporating plenty of white space are design best practices.¬†But lately we’ve also seen emails that pull off background colors in a fresh and inspiring way‚ÄĒand not just in headers or footers. Here are tips for using background colors creatively in email, with inspiration from emails we’ve spotted lately that aren’t afraid to go bold with color.

Tip #1: Combine images and background colors

Emails that are made up entirely of images (with little to no plain text) are problematic:¬†some people¬†won‚Äôt be able to see an image-only email at all (because of their email client settings); image-only emails¬†end up in spam folders; they aren‚Äôt mobile-optimized; and they often don‚Äôt get¬†fully downloaded. That’s why we always insist that effective emails have a balance of images and text (at least 500 characters of text).

Check out this email from Moo, the website that helps you design and print business cards, first with image-viewing turned off:

Screen Shot 2016-02-16 at 4.17.23 PM

And then with images turned on:

Moo

Once images are viewable, we can see that most of the top portion of the email is plain text, while the second half is an image of a stack of business cards. But put together, it looks like the email is a single, solid image. The two modules of the email seamlessly flow into each other through the use of the deep purple background color.

Moo markup

This design tactic is clever. It allows Moo to use color in a simple, striking way to build an email that has a single visual focus (it looks like one cohesive image or module). But it allows Moo to avoid sending an image-only email.

To pull it off, three elements of the email¬†need to match: (1) The background color of the photos, (2) the HTML background color of the plain text section, and (3) the background color of the ALT text when images don’t appear. (If you don’t know the¬†HTML color code of¬†an image or graphic, a web tool like HTML color codes¬†will let you upload a photo to determine the colors used.)

Logitech employs a similar approach in a recent email. Here it is without images:

logitech no images

And here’s the email with images:

logitech with images

Like Moo, Logitech is able to make color blocks by combining plain text modules and images¬†with¬†matching background colors. The sections couldn’t be more clearly distinguished. Both emails are optimized with email-safe text and bulletproof buttons that will always render. The styled ALT text background (we’ll cover how to do this in a workshop coming up!) upholds the¬†structure of the design, even when images aren’t viewable. It’s a great way to make background colors work with your product photos to create a bright, bold email that’s eye-catching and a change of pace from a sterile white background.

Tip #2: Use a single background color for the entire email

It can be tough to break away¬†from the typical white background, and using a¬†background color throughout your email can significantly¬†change the impact it has on readers. As we cited in our post on 10 Creative Ways to Use Color in Email, according to data from TruConversion,¬†90 percent of product assessment is based solely on color. So when you’re using color in a way that can potentially be pretty overpowering, like top-to-bottom in an email, it’s wise to think about the feeling you want to evoke first. From what we’ve seen, brands that do this well choose a branded color that’s a light shade.

Here’s an email from AIGA, the design association, that uses its pale pink brand color as the background:
aiga

Lit Hub, the literary website, takes a similar approach for its daily emails, using a light peachy color throughout:

lithub daily

In each of these emails, a uniform non-white background color works well and looks great because:

  • Contrasting font and link colors are used so all¬†text is easy to read
  • There’s only one other complementary color used in addition to the background color (for AIGA, it’s the darker pink in the header and footer; for Lit Hub it’s the reddish color in the links and buttons)

Plus, the pale shades act similarly to a white background: they feel light and airy.

Tip #3: Separate content sections with background colors

One of our favorite ways to use vibrant background colors in email is¬†section by section. It’s one of the¬†most effective organizational uses of¬†color, making clear where one section ends and another begins. We wrote about how Litmus has used color blocking in this way in the past, and we recently received an email from them with three boldly colored modules:

litmus

The blue, orange, and green sections clearly stand out. The colors are on-brand and complement each other. Plus, the graphics contained in each section are mostly white and black, so the background colors provide a nice contrast and help them stand out.

Similarly, the Modern Desk uses background colors to separate modules of its email, including two shades of pink at the top, yellow, and green:

modern desk

Each of these emails, from Litmus and from Modern Desk, wisely incorporates modules with white backgrounds in addition to those with a bright background color. There’s no need to do a new color for each section, which could end up feeling overwhelming and cluttered. The¬†emails are both¬†pretty long, too, so incorporating background colors in sections is a great way to visually break up sections and keep the reader scrolling.

Wrap-up for using background colors in email

  1. Coordinate the background color of your product¬†photos with the HTML background color of an adjacent¬†plain text section to improve your image-to-text ratio. Your email will look bold and bright but won’t get caught in spam filters or be bogged down with large slow-to-load images.
  2. Use a single background color for your entire email by choosing a light shade and making sure your text color contrasts and is easily read.
  3. Break up long emails with color blocking. Use bright background colors in different modules to improve organization and call attention to various sections.

Have fun! And try the BEE editor to change the colors in your email in just a few clicks. All emails are responsive, and BEE is free, online, and requires no registration.

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor