How do you add visual interest to your emails? If you’re like most brands, you probably rely heavily on product images and graphics. There’s nothing wrong with that. But you might be overlooking an easy way to snazz up your marketing emails: Email CSS background colors!
Background colors can organize content and establish hierarchy. When they’re used behind images, they can even reinforce your design when image-viewing is turned off. Plus, HTML background colors render across all inboxes and are easy to create.
Email background colors can organize content and reinforce your design. Plus, they're easy to create!
Click To Tweet
Many emails will maintain a white background and reserve color blocking for headers and footers. This visually separates intro and outro content from the body of the email. See how this Crate & Barrel message has a white and gray background in the body of the message, but includes a pop of red in the header?
Using a simple color palette and incorporating plenty of white space are email 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 a few key tips for using email CSS background colors creatively in email, with inspiration from brands we’ve spotted lately that aren’t afraid to go bold with color.
Create your email
for free!
Customize one of our
200+ mobile-ready templates.
And free your time with our
drag & drop editor!
No signup required
Read more#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 often end up in spam folders or don’t get fully downloaded. And they aren’t mobile-optimized, either. That’s why we always insist that effective emails have a balance of images and plain text (at least 500 characters of text).
Check out this email from Moo, a website that helps you design and print business cards, first with image-viewing turned off:
And then with images turned on:
Once the 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 email CSS background color.
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 (and looks like one cohesive image or module). But it simultaneously allows Moo to avoid sending an image-only email.
To pull off this kind of message, three elements of the email need to match:
- The background color of the photos
- The HTML background color of the plain text section
- 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:
And here’s the email with images:
Like Moo, Logitech is able to make color blocks by combining plain text modules and images with matching email CSS 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. And the styled ALT text background 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.
#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. Remember, 90% 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 Chobani that uses its pale tan brand color as the background:
Everyday Needs takes a similar approach in this message, using a light gray color throughout:
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. Plus, the pale shades act similarly to a white background: They help the email feel light and airy.
#3. Separate content sections with background colors
One of our favorite ways to use vibrant email CSS 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 recently received an email from Draper James that’s a great example of this:
The blue, white and pale peach sections clearly stand out. The colors are on-brand and complement each other. And it’s easy to navigate the message to find what you need.
Similarly, Otherwild uses bold background colors to separate different modules of this email:
The blue, green and orange match the products shown in the photos, helping the merchandise stand out. Incorporating email CSS background colors in sections is a great way to visually break up long emails and keep the reader scrolling.
Wrap-up: Use our free email editor for email CSS background color
Looking for a way to change the colors in your email with just a few clicks? Try the BEE email editor! A free marketing tool that’s great for any brand, the BEE editor makes it easy to change your background color or do anything else to your email that you need to do. Try one of our responsive HTML email templates to help you get going!
Take a look at our Template Catalog!
Choose from hundreds of beautiful mobile-ready templates.
Create your next stunning campaign with just a few clicks.
Start Designing!Share this post with your friends! Pin it on Pinterest 
Updated November 16, 2020.
source https://emaildesign.beefree.io/html-background-colors-use-in-email/
No comments:
Post a Comment