Consistent and creative use of color in email is one of the most important things you can do as an email designer or marketer. Our brains can process visuals at the incredible speed of 0.013 seconds, and color is a major factor in how we evaluate what we’re seeing. According to data from TruConversion, 90 percent of product assessment is based solely on color. In one case study, a company saw a 20 percent increase in conversions just by switching a call-to-action button from green to red!
It’s clear that color has power. But how can we harness that power in email? Read on for 10 creative ways to use color in email, with inspiration from brands doing it right.
1. Color your ALT text
ALT text—also known as alternate text—is the text that shows up when your email’s images don’t appear (most often because your subscriber has image-viewing turned off or the images are too large and slow to load). It’s a best practice to always use ALT text so that readers who don’t see images still get your message. Here’s how ALT text typically looks (on the left) and then how the email appears with images (on the right):
It’s clear to see why it’s not wise to send an email that’s entirely made up of images—it really won’t look good if the images aren’t there (read more in our post on email images here). However, if you are sending image-heavy email campaigns, did you know you can style ALT text, too? Check out how much better the ALT text looks in this email, on the left, with background colors added (email with images loaded appears on the right).
Color your ALT text to improve your email’s design, even without images.
2. Organize content with color tabs
Small color tabs or labels can improve content organization and readers’ ability to skim your email. We’ve seen quite a few brands consistently use this technique to add order to both text and image content. One of the great things about these small splashes of color is that they’re not images. Using an HTML background color means they’ll always show up.
Buzzfeed employs yellow color tabs to label how readers reacted to their stories. They’re small and unobtrusive, segment the stories, and give readers a bit of extra information.
Refinery29 takes a similar approach by adding green labels to their stories above each header image. The effect further organizes and categorizes the content, giving order to a lot of information.
Fodor’s wants you to know exactly what their headlining story is about as soon as you open the email, so each header image always gets a small orange label at the top.
3. Go all in on a color scheme
Complement the photos in your email by reflecting their colors in your headers and call-to-action buttons. This is a great technique for product emails. The approach unifies the aesthetic of the email and offers a cohesive, contemporary look. You can even match the exact HTML color from an image or graphic by using a quick web tool like HTML color codes. Here’s an example from Beats by Dre:
And another from MAC cosmetics:
4. Add color blocks to your photo collage
Mix up your email’s photo gallery by adding text blocks with flat HTML background colors. The approach breaks up images, adds a sense of cohesion to photos, and is perfect for demonstrating a process, like in this example from Brit + Co:
But make sure the color blocks are plain text with background colors (not images) to improve your text-to-image ratio. And, make it responsive! Read our tutorial on how to make a responsive infographic in email.
5. Divide content with color
A lot of emails have a white background—often, this makes the content feel a little lighter, cleaner, and less cluttered. And it makes high-contrasting black text easier to read. But all that white space leaves plenty of room to get playful with color when it comes to separating and organizing your content. We often see this approach when modules of an email have different background colors to visually separate them, like in this email from BarkBox, which we wrote about in our post How to create unique content dividers in email:
The red, blue, and green background colors immediately stand out and let the reader know they’re reading a new section. Another way to make a graphically appealing separation between sections of content is to use color to box content within email, like InsideHookNY does here:
Notice how the blue color is all the same for the content separator, the header, and the CTA button. When choosing colors, err on the side of keeping it simple for a modern, well-designed look. The publisher Mic uses a similar approach:
6. Get clever with color in text
There’s no rule that says the plain text in your email needs to be black. As long as it contrasts enough against your background color (and is aesthetically pleasing), it’s okay to leave the black font behind and play with color. But simpler is better. Fusion uses an on-brand aqua-and-purple color scheme to liven up their listicle emails. It’s a nice break from the black font we often see, and it also serves to organize the email. The consistent use of aqua for headers and purple for sub-headers allows the reader to skim this email more easily and understand how the content is ordered.
Publisher Vox takes another approach to playing with color and text by adding a highlight effect to headers. It’s an easy, fast effect to apply, and it looks sharp and will always render well since it’s not an image.
7. Create contrasting color CTA buttons
One of the most powerful ways to use color in email is in your call-to-action buttons. CTA buttons should visually pop out from the rest of your email—a reader scanning your message should be able to instantly identify where the CTA is. Color is a great way to do that. But it’s all about balance; your button should also be on brand and simply styled. Read more about designing your CTA button in our post Top tips for call-to-action button design.
In choosing a button color, most brands choose a color that is both within their brand color palette and one that matches the aesthetic of the particular email. Often, the button echoes the header design in color (if not also in width or tone). Here’s how TasteBook uses the same bright green color of its logo for buttons:
It’s so easy to spot, and it’s bulletproof—a must!
Another way to use color to distinguish your call-to-action button is to make the module that contains it a distinct color, like in this example from Contently:
If you’re scrolling through this email, the e-book section—and subsequently the “Download now” button—immediately stands out with the blue background color compared to the mostly white email.
8. Use a color other than blue for links
Readers don’t need the classic bright blue text to know text is linked. Get playful with color. Capitalize on branding your email by using an on-brand color for links. Here’s how LitHub uses their brand red on a pale peach background to easily call out links to readers:
Similarly, the Mic Check newsletter uses their brand turquoise color in both headers and for links. Against the otherwise all black-and-white email, the links easily stand out.
9. Use background color for headers, footers, and ads
HTML colors are a great tool for content organization in email: they render across all inboxes (unlike images), they take up less than one line of code, and they’re easy to implement. By assigning different background colors to modules of your email, you organize content and provide a seamless reading experience for subscribers. Using an HTML background color as your header is an excellent alternative to using an image (which may not render). Here, the agency edenspiekermann uses HTML color in its header and in the body of the email, changing the middle module and footer to white to distinguish new areas of content.
Like headers, footers are often distinguished from the body of an email with a different HTML background color. General Assembly always takes this approach in their simply designed footers, adding a sign-off quote for good measure:
One of the most valuable ways HTML background colors come in to play is when singling out advertising content in email. It’s especially useful for native ads, which need to be identified clearly and consistently—legally. The Interactive Advertising Bureau advocates that, for paid native ad units, the disclosure must “Use language that conveys that the advertising has been paid for, thus making it an advertising unit, even if that unit does not contain traditional promotional advertising messages” and “Be large and visible enough for a consumer to notice it in the context of a given page and/or relative to the device that the ad is being viewed on.”
The New Yorker does just that in a recent email, flagging their ad with a distinct gray background in addition to labeling it with text:
For more examples and best practices for ads in email, see our Publisher’s Guide to Email Advertising.
10. Go colorless
One final tip on how to use color? Don’t use it. Especially if it’s a regular part of your email design aesthetic. Instead, try an all black and white email. Without color to help you call attention to links and CTAs and to help you organize content, you might be forced you to simplify, streamline, and improve your design in ways you wouldn’t otherwise think. Here’s a B&W email from Converse that initially caught our attention via designer Mike Ragan’s tweet:
Get creative with your email campaigns and try using color…
- For ALT text. Style image ALT text so your email looks sharp without images.
- As labels. Organize long emails with color tabs.
- To match photos. Go monochromatic and stand out.
- To divide content. Use colorful lines and background colors to get organized.
- In a photo collage. Break up images with flat design.
- With text. Use a high-contrast color other than black.
- For links. Step away from boring blue and brand your links.
- In CTA buttons. Make sure they stand out more than anything else in your message.
- For HTML backgrounds for ads. Be clear about what’s an add. And try HTML colors in headers and footers, too.
- Not at all! Go black and white and see what happens!
What experiments with color have you tried in your emails? Share your own color tips in the comments!
Total: 0 - Average: 0