A Guide to Coding HTML Background Colors in Email
Black and white is classic, but how about using HTML/CSS background colors to make your email marketing campaigns pop? After all, color psychology has a big impact on your readers.
In other articles, we’ve discussed how to style your emails with HTML and CSS, and we’ve given you tips on how to code a bulletproof background. Now, we’re going back to basics and talking about how to add background color in HTML and CSS. Let’s dive in.
Table of content
How do I use colors in HTML?
Let’s paint the town red. Well, not the town, per se. Let’s start with the background of an HTML email template.
Here’s a simple HTML code that sets the HTML background color to red:
<body style="background-color:red;">INSERT CONTENT HERE.</body>Here, we used an HTML color name, “red,” to specify the background-color.
There are a few ways to refer to colors in HTML, including:
- HTML color name
- Hex color code
- RGB value
- HSL value
Check out this color picker for the various HTML color codes, and let’s dive into each of these in more detail below.
1. HTML color name
The HTML color name is probably the most intuitive way to specify a color in HTML. In the previous code sample, you simply use the HTML color name to specify the color for your background. Check out W3C’s handy list of HTML color names.
2. Hex color code
Hex color codes consist of a hashtag “#” followed by a series of six letters and/or numbers. For example, the Hex color code for red is #FF0000. You can set your background-color to red via Hex color code with the following code:
<body style="background-color:#FF0000;">INSERT CONTENT HERE.</body>
3. RGB value
RGB refers to red, green, and blue. These three colors of light mix to create all other colors, including white. Using RGB, you can specify a color with three numeric values, ranging from 0 to 255, and representing the values for red, green, and blue. By assigning values to rgb (red value, green value, blue value, alpha value) to find your desired color. Here’s the sample code using RGB values to set your background-color as red:
<body style="background-color:rgb(255,0,0);">INSERT CONTENT HERE.</body>In this example, the first value (red) is 255, which is the maximum value, and the subsequent color values for green and blue to 0. These values mix, producing the color red.
RBGA adds another value to RBG to include more customization. The last value, the alpha channel, allows you to specify the opacity of the color. You can write RBGA as rgb (red value, green value, blue value, alpha value). Red, green, and blue take a value of 0 to 255 and alpha takes a value between 0 for fully transparent to 1.0 for fully opaque. Check out the following code, which is a half-transparent red background-color:
<body style="background-color:rgb(255,0,0,0.5);">INSERT CONTENT HERE.</body>4. HSL value
HSL, which stands for hue, saturation, and lightness, is another set of values used to “mix” chosen colors. The syntax to specify HSL value is similar to that for RGB as it consists of three values. Check out the sample code to specify a red background using HSL: First, a value from 0 to 255 specifies the hue. Then, a percentage from 0% to 100% indicates the saturation. Finally, a percentage from 0% to 100% dictates the lightness.
<body style="background-color:hsl(0,100%,50%);">INSERT CONTENT HERE.</body>Just like with RGBA, HSL can be extended with an alpha channel that takes a value between 0 for fully transparent to 1.0 for fully opaque. Check out the example below. The first three values are the same as in the example above. The last parameter is a value between 0 and 1.0 that indicates the transparency of your color.
<body style="background-color:hsla(0,100%,50%,.5);">INSERT CONTENT HERE.</body>How can I code background colors in an email?
Now that we know how to reference colors we want to use in HTML email backgrounds, let’s go over how to code colors into emails. There are a few ways to add a background color to your email:
- Using inline CSS
- Using external style sheets
- Using embedded styles in the <head> section of your email
We used inline CSS to style our background color in the previous examples. We’ll continue to use inline CSS in this section since external style sheets and embedded styles often break emails and affect your deliverability and accessibility.
If you need a refresher, check out our HTML coding 101. Without further ado, let’s break down the code samples we’ve used so far.
<body style="background-color:red;">Here’s some text over a red background.</body>Here’s how to add background color in HTML, based on the previous code sample:
- Identify the HTML element you want to apply the background color to. In this case, you’ll apply the background color to the element <body>. Next, you’ll modify the
background-colorof this tag in HTML. - Add a style attribute. In the sample above, this is style. Set the attribute with the equal sign “=” followed by one or more CSS selectors and associated values.
- Determine the appropriate CSS selector. To set the background color, we’ll use the CSS selector
background-color. - Use an HTML color code. Specify your background color with an HTML color code, like an HTML color name, Hex color code, RGB value, or HSL value.
And that’s it! Your result should look something like this:
What else can I do with HTML background colors?
Now you know the basics, but there’s much more you can do with HTML background colors. Here are a few things to try:
- Want to change just a specific section of your email? You can add background colors to specific elements by referring to their HTML tag, like <div>, <body>, or <p>.
- Do you think plain, solid backgrounds are boring? We do too. You can add gradients to your background color – more on that next.
Just like you can set one color as your background in your HTML email template, you can also specify two colors and blend them with a gradient. This provides an interesting effect and allows you to seamlessly blend two background colors in your email design.
Check out the following sample code, which blends red and black from left to right:
<body style = "background-color: linear-gradient(to right, #FF0000, #000000);">Isn't this gradient great?</body>Specify the body element with the <body> tag. Then, modify the body’s <style> attribute by setting background-image to a linear gradient that goes from left to right, starting from the color red (#ff0000) to black (#000000).
This is the result of the code above:
But what about accessibility?
Remember your color choices have a major impact on readability and email accessibility.
You’re already taking a big step towards email accessibility when using background colors instead of background images. In fact, we don’t recommend using background images because they may take longer to load, and some email clients don’t support them.
But here’s the most important consideration for accessibility…
Since the text of your email will be placed on top of the background, you have to ensure you’re using appropriate color contrast between the background and text colors. In our gradient example, it’s easy to see that our black text would start disappearing if it went much further.
Obviously, you’ll want light text on a dark background and vice versa. However, keep in mind that certain color combinations are harder to read. You’ll also need to consider people with different types of color blindness when coding background colors. For more advice, check out our article on improving email accessibility with color contrast.
How does dark mode affect HTML email backgrounds?
So you’ve got your colors down pat now, right? Well, not quite. Keep in mind that some of your readers may browse your emails in dark mode. And, email background colors don’t always play nice with dark mode. In fact, some email clients simply invert your email colors when your subscriber has dark mode enabled. Learn how to optimize your email for dark mode so your emails display as intended.
Wrapping up
There are a few things to remember: Using background images isn't always a good idea because they may take longer to load, some email clients don’t support them, and they can impact your email’s accessibility. But if you do everything correctly and set in place the proper fallbacks, you’ll be sending beautiful, engaging emails in no time.
No matter how you code your email background, make sure to test and preview it before you hit send. That way you can catch potential issues in dozens of different email clients... which don't always play nice with your code and email design.
Ready to start sending the best-looking emails? Check that your HTML background colors display as intended with our email testing tools at Email on Acid. Try us out for free for seven days!
