Tutorial: How to use HTML colors along images in email

Email marketers and designers know sending an email composed only of images is a gamble. Tailoring your image-only design to be just-so in Photoshop, then dropping it into an email template is tempting, but it can also increase your spam score, and it means your message won’t be viewable to subscribers with image-viewing turned off. The best way to get around this is to break up images with plain text and HTML design that will render no matter what. And you can do this without sacrificing the look of your email.

We recently looked at three clever ways brands are using HTML background colors in email. In one example, Moo, the website that helps you design and print business cards, incorporates the purple color from a product image into the background of a plain-text module in their email. This color blocking technique unifies the email’s composition, reinforcing a single visual focus. It looks like it’s a single image even though it isn’t.

Moo

Moo markup

Tutorial: How to use HTML colors with images in email

Today, we’ll recreate this email in the BEE editor to show you how using HTML colors with images can improve your email design without sacrificing looks.

Here’s our video recap:

Step 1: Set up the single-column structure

In BEE, we’ll start designing in a basic one-column template.

bee single column

The email has four modules: one at the top for the header, one for the plain text and CTA button, one for the main body image, and one for the footer. From our Structure menu on the right, we’ll create this structure by dragging in four single-column modules.

Screen Shot 2016-02-19 at 11.17.41 AM

Step 2: Arrange content blocks

Section 1: The first module will contain two images: the Moo header and the sub-header in the Moo brand font (“It’s Luxe all around!”). So we’ll drag in two image containers from the Content menu.

Screen Shot 2016-02-19 at 11.22.20 AM

Section 2: The following module contains text and the “Shop now” button. Text and button containers are pulled in.

Screen Shot 2016-02-19 at 11.23.32 AM

Section 3: This middle section will contain the central business card image.

Screen Shot 2016-02-19 at 11.25.26 AM

Section 4: The footer includes social media buttons, followed by text. We’re all set!

Screen Shot 2016-02-19 at 11.26.22 AM

Step 3: Add content and customize

Add images: With our image placeholders are set, we can drag and drop images from the original Moo file into the email.

Screen Shot 2016-02-19 at 11.32.19 AM

Customize text: We’ll update the content in the body of the email and in the footer.

Screen Shot 2016-02-19 at 11.35.08 AM

Then, we can format the text. To match Moo, we’ll choose Verdana size 16.

Screen Shot 2016-02-19 at 11.37.35 AM

The footer font is smaller; we’ll choose 12px. To make the link color green for Unsubscribe and View Online, we’ll navigate to the Body menu and choose green for all links in our email.

Screen Shot 2016-02-19 at 11.41.20 AM

Then, when we link those lines of text, they become green!

Screen Shot 2016-02-19 at 11.42.36 AM

Format buttons: Lastly, we’ll update the CTA button and social media buttons.

The CTA button needs just two simple changes: we’ll make it orange in the Background color menu, and then we can also condense the height a bit by selecting a tighter option in the Line height menu. Read more about all the ways you can customize buttons in BEE in our post How to design bulletproof CTA buttons in email.

Screen Shot 2016-02-19 at 11.46.37 AM

We’ll also choose the same social buttons as Moo, and drag-and-drop them in the icon collection menu to reorder. Read more about how to customize your social media buttons in our post How to customize social media buttons in email with BEE.

Screen Shot 2016-02-19 at 11.52.16 AM

The message is shaping up!

Screen Shot 2016-02-19 at 11.50.22 AM

Adjust padding: The header images are clearly a bit condensed, so we need to create space between them. We can do this by selecting one or both images and increasing the padding above or below each one. Just made sure to move the More options slider to the right to make adjustments on particular sides of any type of content.

Screen Shot 2016-02-19 at 11.53.45 AM

Our spacing now looks closer to Moo’s.

Screen Shot 2016-02-19 at 11.56.16 AM

Step 4: Select HTML background colors

Now it’s time for the fun part! We need to update the background color behind the header and the plain text module to match seamlessly with the product photo beneath. To get the HTML code for the color we need, we went to html-color-codes.info, uploaded our image, and got the proper code.

Screen Shot 2016-02-19 at 10.01.20 AM

Then, we can copy #502944 and drop it right into BEE. The easiest way to do this in one fell swoop is to go to the Body menu and paste the code into the Content area background color field.

Screen Shot 2016-02-19 at 12.02.25 PM

We can also select a light gray for the background color, same as the original email.

Just like that, our email background matches the central image exactly. Pretty cool, isn’t it?

Screen Shot 2016-02-19 at 12.03.34 PM

Just a few final updates: we’ll change the text color to white, and update the footer background color to white, too.

Here we are!

Screen Shot 2016-02-19 at 12.06.27 PM

Put together, the matched modules make the email appear to be a single, solid image. It’s a simple way to improve our image-to-text ratio with a bold and bright email that won’t get caught in spam filters. Check out other ways to use HTML colors in email in our design inspiration post, and, if you’re really feeling creative, see how to combine HTML colors with images to build unique content dividers. In the BEE editor, it’s a cinch!

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