Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Black and white is a classic, but how about using HTML/CSS background colors to add a special touch to your email marketing campaigns? Finally, color psychology has a huge impact on your readers.
In other articles, we've discussed how to style your emails with HTML and CSS and given you tips on how to code a bulletproof background. Now let's go back to basics and talk about how to add background colors in HTML and CSS. Let's dive in.
How do I use colors in HTML?
Let's paint the city red. Well, not the city itself. Let's start with the background of an HTML email template.
Here is a simple HTML code that sets the HTML background color to red:
INSERT CONTENT HERE.Here we have used the HTML color name “red” to specify the background color.
There are several 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 different HTML color codes and let's go into each of these codes 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 example, you simply use the HTML color name to specify the color for your background. Check out the 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:
INSERT CONTENT HERE.3. RGB value
RGB refers to red, green and blue. These three colors of light mix to form all other colors, including white. Using RGB, you can specify a color with three numeric values ranging from 0 to 255, representing the values of red, green, and blue. By assigning RGB values (red value, green value, blue value, alpha value), you can find the color you want. Here is the example code that uses RGB values to set your background color to red:
INSERT CONTENT HERE.In this example, the first value (Red) is 255, which is the maximum value, and the subsequent color values for green and blue are 0. These values mix to produce the color red.
RBGA adds further value to RBG by offering more customization options. The last value, the alpha channel, allows you to set 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 from 0 to 255, and alpha takes a value between 0 (completely transparent) and 1.0 (completely opaque). Take a look at the following code, which has a semi-transparent red background color:
INSERT CONTENT HERE.4. HSL value
HSL, which stands for Hue, Saturation and Lightness, is another set of values used to “blend” selected colors. The syntax for specifying the HSL value is similar to that for RGB in that it consists of three values. Take a look at 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 saturation. Finally, a percentage from 0% to 100% determines the brightness.
INSERT CONTENT HERE.Just like RGBA, HSL can be extended to include an alpha channel that takes a value between 0 (completely transparent) and 1.0 (completely opaque). Check out the example below. The first three values are the same as in the example above. The final parameter is a value between 0 and 1.0 that specifies the transparency of your color.
INSERT CONTENT HERE.How can I encode background colors in an email?
Now that we know how to reference colors that we want to use in HTML email backgrounds, let's look at how to encode colors in emails. There are several ways to add a background color to your email:
- Using inline CSS
- Use of external style sheets
- Using embedded styles in section of your email
In the previous examples we used inline CSS to style our background color. We'll continue to use inline CSS in this section because external stylesheets and embedded styles often break emails and affect your deliverability and accessibility.
If you need a refresher, take a look at our HTML Coding 101. Without further ado, let's break down the code examples we've used so far.
Here is some text on a red background.To add a background color in HTML based on the previous code example:
- Identify the HTML element to which you want to apply the background color. In this case, you apply the background color to the element . Next, change the background color of this tag to HTML.
- Add a style attribute. In the example 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 use the Background Color CSS selector.
- Use an HTML color code. Specify your background color using an HTML color code, e.g. B. an HTML color name, a hex color code, an RGB value or an HSL value.
And that's it! Your result should look something like this:
Generated with https://jsfiddle.net/.
What else can I do with HTML background colors?
Now you know the basics, but you can do so much more with HTML background colors. Here are a few things you should try:
- Do you only want to change a specific section of your email? You can add background colors to specific elements by referencing their HTML tag, e.g
, or
.
- Do you find simple, solid backgrounds boring? Us too. You can add gradients to your background color – more on that below.
Just like you can set one color as the background in your HTML email template, you can also specify two colors and mix them with a gradient. This creates an interesting effect and allows you to seamlessly mix two background colors in your email design.
Take a look at the following sample code that mixes red and black from left to right:
Isn't this gradient great?Include the body element
Label. Then modify the body
