It must be the anticipation of spring that has us thinking about color. Bring us your greens, blues, yellows, oranges, and reds! We’re feeling the love for color in email. And not just color that comes with beautiful photography or graphics, but especially color that’s implemented with the thoughtful use of HTML backgrounds, link text, buttons, and content dividers—all techniques that can be implemented easily in an online editor like BEE. We’re starting a new “Best Use Of” series going
Ready to get inspired? Keep reading.
#1. Split color blocking 50/50
One of the more popular trends in email color treatment that we spotted was color blocking, where only half of the email has a bold background color. This is a simple technique with a really nice effect.
The color combinations in beautiful Offscreen Dispatch emails gives each campaign the look of a page in a magazine. There’s nothing fancy here—no art or photography—just a great, dynamic layout, well-formatted text, and lovely color. This just goes to show how good design and simple color techniques can really elevate the look of an email.
The design is simple to pull off, too, and requires no coding in the BEE editor. BEE users would simply use a single column structure for the top half of the email, choosing the coral color as the row background color and content background color. A two-column structure would be pulled in for the second half of the email, and the background colors would be set to white.
The New York Times
We also spotted a similar 50/50 color blocking approach used by The New York Times.
The look offers a bold emphasis on the top portion of the email, as if you’re literally highlighting it. In a case like this, it’s important to choose a color for the CTA button that works well against both the black and white backgrounds.
Vitamin company Care/of uses two shades of beautiful blue for its color-blocked email.
And ClassPass, similar to Care/of, matches its art with its background. We love this clever look!
#2. Replace shades of grey with purple or blue
If bold background colors aren’t your thing, you still have plenty of options for getting colorful. When you start color-coordinating links, lines, and buttons, you can quickly accomplish a really pulled-together, cohesive feel. Take these emails from the video platform company, Wistia.
Can you count all the purple items in this Wistia email??
We see: purple plain text, purple logo, purple video play button, purple CTA button, purple horizontal lines, and a very pale purple HTML background color that gives the email a boxed effect. All this purple sounds like a lot when listed. But in reality, the ample white space in this email along with the washed-out look applied to the background color works. Check out how they do it again with blue.
As you can see, Wistia’s typical template is super simple. This definitely helps them pull off the single-color look without it overwhelming the email.
Here’s a much subtler example of a touch-of-color email. Instead of a lot of color touches, The Intercept uses its brand color for link text.
The subtlety is a simple move that gives the email a slightly more sophisticated look. No matter what color you choose for your links, though, it’s important to remember the advice we got from Email on Acid’s CEO John Thies about email accessibility. His recommendation? Always underline your links. Otherwise, people with visual impairments might miss them entirely.
#3. Get grid “blocked”
We love a good grid. They’re pleasing to the eye! And in an editor like BEE, each content block can be customized individually, so it feels like the sky’s the limit when it comes to achieving the perfect look.
There’s no mistaking emails from The Outline. Each one employs a color-washed look with 3 colors: pink, violet, and yellow (plus white). It’s a super beautiful editorial look that doesn’t compare to any other newsletter we know.
A more common color grid approach often comes from photography, like in this Malin+Goetz email.
#4. Cut on the diagonal
Graphic designers have a thing for diagonal lines these days. They seem to have become trendy in the past few years, and we’re happy to see them stick around! Like the 50/50 color block emails, diagonal lines seem to be everywhere separating content instead of level horizontal lines.
Moo has leveraged diagonal lines in email for a while now. We love it! Especially because the use of color with the diagonals is so unique.
Diagonal lines like these create a sense of depth and movement. And by choosing two shades of the same color, the email looks especially chic.
#5. Go back to black and white
Maybe just as inspiring as creative color in email is the total lack of it. We have to admit, a good black and white email always stands out. With all the colorful, collage-style, jam-packed emails flooding our inboxes, we pause when we receive one that’s totally naked. The eye reacts by stopping to look more closely, wondering what’s actually there.
Of course, this approach won’t work for all brands, but it can be a good approach for those in content marketing, the publishing industry, or those sending out regular e-newsletters. More image-forward e-commerce brands, like Artsy and Revue, can still try the look, though, by using black-and-white photography.
Revue (part of its “Carefully curated by Your Majesty Co. with Revue” newsletter)
Ready to go Pro?
Creative color in email never gets old. Have fun with it! Go ahead and design your own color-coordinated email in our easy-to-use, drag-n-drop BEE editor in minutes. No HTML knowledge is required, plus your email will be mobile responsive. Sign-up for a BEE Pro free trial and you’ll be on your way!
Total: 4 - Average: 2