How to Code Background Colors in HTML Email Newsletters

Monday Jan 9th 2017 by Rob Gravelle
Share:

Designing an email newsletter requires you to give some thought to the colors that you use. Colors should be attractive while not overpowering the content. This tutorial explains how to use HTML and CSS color codes to set the background colors to achieve the look you want.

How to Code Background Colors in HTML Email Newsletters

By Rob Gravelle with Lisa Smith

The modern marketing trends stand in stark contrast from the ones that were used earlier. This change is attributed to the Internet, which is today ruling the lives of people across the globe. One of the most popular and widely used marketing strategies is sending email newsletters to a business's customer base. This is definitely a great idea and one that is yielding results for most companies.

However, designing an email newsletter is really not as simple as it seems. It is not just about putting together the content and the images. You also need to give some thought to the colors that you use in your newsletter. These have to be attractive and at the same time should not overpower the content.

HTML Color Codes

Well, all this seems pretty simple when written in print, right? But this is really not as hunky dory in HTML. You actually need to right proper codes to bring in the perfect background colors for your HTML email newsletters. Whether you are looking for a purple background or a yellow one, you ought to get your codes right, to get the desired effect.

The fact is that even the most seasoned developers sometimes find it hard to write the code for the background colors. Sometimes even after putting in a lot of thought and writing the color codes carefully, they end up with a black screen that overshadows all the other content. This can be quite frustrating. However, not everything is lost. There are quite a number of ways in which you can write the code for background colors in HTML Email newsletters.

Let us start by checking out the different techniques that developers use for coding background colors.

  1. HTML bgcolor attribute combined with a 3 digit hexadecimal color code
  2. 6 digit hexadecimal color code used with HTML bgcolor attribute
  3. HTML bgcolor attribute used with RGB color code
  4. 3 digit hexadecimal color code used along with the CSS background-color property
  5. CSS background-color property used with 6 digits hexadecimal color code
  6. CSS background-colorproperty combined with RGB color code

3 Digit Hexadecimal Color Codes

Now it has been seen that using the 3 digits hexadecimal color code is rife with complexities and does not yield the desired results. No matter how and where you use them, you end up with a black or a blue background that covers up or overpowers the whole content.

RGB Color Codes

Using RGB color codes for coding background colors for HTML Email newsletter has been found to be slightly better than the 3 digit hexadecimal color codes. Using these tend to create some attractive color combinations. However, this means that these would work fine with white colored or light colored fonts. But, if you are thinking of black font, this is just not going to work.

6 Digit Hexadecimal Color Codes

So, what is the best way to write codes for background colors in HTML newsletters? I would suggest that you use the 6 digits hexadecimal color code. This is definitely the most reliable way of doing it and would surely yield the results that you are expecting.

Here is how you can use 6 digit hexadecimal color codes for writing codes for background colors:

1. Setting the Width and Background Color for Content

You can set the width and background color for the content area by writing a single set of codes. Decide on the width of the area and the color that you want to add to the background. While writing the code, use the appropriate width percentage and the relevant color code. This can be written as

<table style="width: 100%; clear: both; border-collapse: collapse; padding: 0px; border: 1px solid black; color: #333333;">

2. Changing the Background Color of a Message

In order to change the background color of a message in the newsletter, first, locate the body tag in the existing code. Once you locate it, you can add a color code to put in a background color or replace the existing color code with a new one to change the background color. This can be written as:

<body style="color: #FF0000;">

3. Changing the Background Color of a Table

If you are not happy with the background color of a table and want to change it, just go ahead and locate the table tag in the code. Once you find it, replace the existing color code with the color code of your choice. For example, if you want a purple background for the table, put in the color code for a purple and you are done.

<table style="width: 100%; clear: both; border-collapse: collapse; padding: 0px; border: 1px solid black; color: #8A2BE2;">

4. Changing the Background Color of a Cell

In case you are thinking of highlighting one or more cells by giving them a different color, you can accomplish this too by applying the code to the correct element. For this check the existing code to find the tag for a content table. This would either be the cell whose color is to be changed or a table with just one cell. In the latter case, instead of writing the code to change the background color of the cell, you can write the code to change the background color of the content table. This in turn, automatically changes the color of the target cell.

Simple Table

<table style="width: 100%; clear: both; border-collapse: collapse; padding: 0px; border: 1px solid black; color: #8A2BE2;">
  <thead>
  </thead>
  <tbody>
    <tr>
    <td>I'm blueviolet</td>
    <td style="color: #4B0082">I'm indigo</td>
    <td>I'm blueviolet</td>
    </tr>
  <tbody>
</table>
blueviolet background indigo background blueviolet background

Nested Table

<table style="width: 100%; clear: both; border-collapse: collapse; padding: 0px; border: 1px solid black; color: #000000;">
  <thead>
  </thead>
  <tbody>
    <tr style="height:35px;">
    <td>blueviolet background</td>
    <td>
      <table style="width: 100%; height:35px; clear: both; border-collapse: collapse; padding: 0px; border: 1px solid black; background-color: #4B0082; color: #FFFFFF;">
        <thead>
        </thead>
        <tbody>
          <tr>
          <td>indigo background</td>
          </tr>
        <tbody>
      </table>
    </td>
    <td>blueviolet background</td>
    </tr>
  <tbody>
</table>
blueviolet background
indigo background
blueviolet background

Conclusion

So, you see, adding perfect colors to the HTML Email newsletter requires some coding expertise. However, once you have mastered the 6 digit hexadecimal codes, this surely gets easier. Now, the next time you want to design an HTML newsletter, you can code background colors like a pro.



Rob Gravelle

Rob Gravelle resides in Ottawa, Canada, and has built web applications for numerous businesses and government agencies. Email him for a quote on your project.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, that has released several CDs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on ReverbNation.com.

Lisa is a designer by profession and writer by choice, she writes for almost all topics but design and Fashion are her favorites. Apart from these she also Volunteers at few Animal rescue centers.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved