Beefree blog

10 Creative Ways to Use Color in Email

Beefree team
Beefree team
Oct 26, 2020
10 Creative Ways to Use Color in Email
10 Creative Ways to Use Color in Email

Consistently and creatively using color in email is one of the most important things you can do as an email designer or marketer. Our brains can process visual information 60,000 times faster than text, and color is a major factor in how we evaluate what we’re seeing. Up to 90% of product assessment is based solely on color. In one case study, a company saw a 20% 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 design inspiration from brands doing it right.

1. COLOR YOUR ALT TEXTALT

text is the text that shows up when your email’s images don’t appear. This happens because your subscriber has image-viewing turned off or because the images are too large, making them slow to load. It’s an email design 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 how the same 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. But if you’re sending image-heavy email campaigns, 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, helping readers 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 in email is that they’re not images. Using an HTML background color means they’ll always show up.

In this email newsletter, Robinhood Snacks uses small green tabs of text to categorize each story. “Tappy” and “Aww” denote must-read and adorable content:

These colorful tabs are small and unobtrusive. But they still do a good job of segmenting the stories and giving readers a bit of extra information.

3. GO ALL IN ON A COLOR SCHEME

Complement the photos in your email by reflecting their colors in your headers and CTA 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 Draper James:

The product that’s being showcased is a dress in vibrant tones of lilac, lavender, marigold and fuschia. The text below the image is written in the same colors as the dress, helping tie the email together.

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 and adds a sense of cohesion to photos, like in this example from Michael’s.

Make sure the color blocks are plain text with background colors (not images) to improve your text-to-image ratio. And don’t forget to make it responsive!

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. It also makes high-contrasting black text easier to read.

But all that white space leaves plenty of room to get playful with color in email 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 Melissa & Doug.

It’s clear where the first section of this email ends and the second one starts. The visual separation can help your readers navigate the content.

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, it’s okay to leave the black font behind and play with color. 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.

The New Yorker takes a more subtle approach when it comes to color in email by adding red text above each headline. The text categorizes each article and pops just enough to catch the eye.

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. And color is a great way to do that! But it’s all about balance. Your button should also be on brand and simply styled.

Most brands choose a color that’s within their brand color palette and matches the aesthetic of the particular email. Often, the button echoes the header design in color. Here’s how Cratejoy uses the same blue color of its logo for many of its CTA buttons:

It’s so easy to spot, and it’s bulletproof — a must!

Another way to use color to make a CTA button stand out is to make the module that contains it a distinct color, like in this example from Can’t Clutch This.

If you’re scrolling through this email, two of the CTA sections immediately stand out because of the pale pink background color compared to the mostly white email.

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 different 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 New Yorker uses a tan background color to distinguish a paid post from the rest of the email.

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 to simplify, streamline and improve your design in ways you wouldn’t otherwise think. Here’s a B&W email from Converse that we love:

WRAP-UP: GET CREATIVE WITH COLOR

Get creative with color in email by using the BEE email editor. Our drag-and-drop editor is the perfect way to play with background colors, headers, CTA buttons and more, cycling through a rainbow of options before you hit send. Use the BEE editor for free today to create beautiful emails for your subscribers!

Related posts

Why Pardot Users Choose Beefree for Better Email Design

Pardot’s email builder slowing you down? Learn why teams across industries turn to Beefree to create stunning, compliant emails—then export to Pardot with one click.
Beefree team
Apr 23, 2025

Send Error-Free Emails with Confidence Using Beefree

Learn about the Beefree features that can help you and your team catch mistakes, streamline collaboration, and send with confidence every time.
Beefree team
Apr 15, 2025

Using Beefree with Marketo Engage 101

Learn how integrating Beefree with Marketo Engage can help you build high-converting, on-brand email campaigns— faster.
Luca Penati
Apr 4, 2025

Stay informed on all email trends

From the latest creative design strategies that inspire your next campaign to industry best practices and tech advancements, our newsletter is the go-to for all things creation.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking Subscribe you're agreeing with our Privacy Policy
Beelo here 👋 Got questions?
User Avatar
Inspiration questions
What are the best practices for using color in CTA buttons?
How can I make ALT text visually appealing with color?
How can I create on-brand emails in minutes?
How does it optimize for mobile?