Black and white is traditional, however how about utilizing HTML/CSS background colours to make your e-mail advertising and marketing campaigns pop? In any case, colour psychology has a huge impact in your readers.
In different articles, we’ve mentioned the best way to model your emails with HTML and CSS, and we’ve given you recommendations on the best way to code a bulletproof background. Now, we’re going again to fundamentals and speaking about the best way to add background colour in HTML and CSS. Let’s dive in.
How do I exploit colours in HTML?
Let’s paint the city purple. Nicely, not the city, per se. Let’s begin with the background of an HTML e-mail template.
Right here’s a easy HTML code that units the HTML background colour to purple:
<physique model="background-color:purple;">INSERT CONTENT HERE.</physique>Right here, we used an HTML colour identify, “purple,” to specify the background-color.
There are a number of methods to refer to colours in HTML, together with:
- HTML colour identify
- Hex colour code
- RGB worth
- HSL worth
Take a look at this colour picker for the assorted HTML colour codes, and let’s dive into every of those in additional element beneath.
1. HTML colour identify
The HTML colour identify might be essentially the most intuitive method to specify a colour in HTML. Within the earlier code pattern, you merely use the HTML colour identify to specify the colour in your background. Take a look at W3C’s helpful record of HTML colour names.
2. Hex colour code
Hex colour codes include a hashtag “#” adopted by a collection of six letters and/or numbers. For instance, the Hex colour code for purple is #FF0000. You possibly can set your background-color to purple by way of Hex colour code with the next code:
<physique model="background-color:#FF0000;">INSERT CONTENT HERE.</physique>
3. RGB worth
RGB refers to purple, inexperienced, and blue. These three colours of sunshine combine to create all different colours, together with white. Utilizing RGB, you’ll be able to specify a colour with three numeric values, starting from 0 to 255, and representing the values for purple, inexperienced, and blue. By assigning values to rgb (purple worth, inexperienced worth, blue worth, alpha worth) to search out your required colour. Right here’s the pattern code utilizing RGB values to set your background-color as purple:
<physique model="background-color:rgb(255,0,0);">INSERT CONTENT HERE.</physique>On this instance, the primary worth (purple) is 255, which is the utmost worth, and the next colour values for inexperienced and blue to 0. These values combine, producing the colour purple.
RBGA provides one other worth to RBG to incorporate extra customization. The final worth, the alpha channel, lets you specify the opacity of the colour. You possibly can write RBGA as rgb (purple worth, inexperienced worth, blue worth, alpha worth). Purple, inexperienced, and blue take a price of 0 to 255 and alpha takes a price between 0 for totally clear to 1.0 for totally opaque. Take a look at the next code, which is a half-transparent purple background-color:
<physique model="background-color:rgb(255,0,0,0.5);">INSERT CONTENT HERE.</physique>4. HSL worth
HSL, which stands for hue, saturation, and lightness, is one other set of values used to “combine” chosen colours. The syntax to specify HSL worth is much like that for RGB because it consists of three values. Take a look at the pattern code to specify a purple background utilizing HSL: First, a price from 0 to 255 specifies the hue. Then, a share from 0% to 100% signifies the saturation. Lastly, a share from 0% to 100% dictates the lightness.
<physique model="background-color:hsl(0,100%,50%);">INSERT CONTENT HERE.</physique>Similar to with RGBA, HSL could be prolonged with an alpha channel that takes a price between 0 for totally clear to 1.0 for totally opaque. Take a look at the instance beneath. The primary three values are the identical as within the instance above. The final parameter is a price between 0 and 1.0 that signifies the transparency of your colour.
<physique model="background-color:hsla(0,100%,50%,.5);">INSERT CONTENT HERE.</physique>How can I code background colours in an e-mail?
Now that we all know the best way to reference colours we need to use in HTML e-mail backgrounds, let’s go over the best way to code colours into emails. There are a number of methods so as to add a background colour to your e-mail:
- Utilizing inline CSS
- Utilizing exterior model sheets
- Utilizing embedded types within the <head> part of your e-mail
We used inline CSS to model our background colour within the earlier examples. We’ll proceed to make use of inline CSS on this part since exterior model sheets and embedded types typically break emails and have an effect on your deliverability and accessibility.
For those who want a refresher, take a look at our HTML coding 101. With out additional ado, let’s break down the code samples we’ve used thus far.
<physique model="background-color:purple;">Right here’s some textual content over a purple background.</physique>Right here’s the best way to add background colour in HTML, primarily based on the earlier code pattern:
- Determine the HTML component you need to apply the background colour to. On this case, you’ll apply the background colour to the component <physique>. Subsequent, you’ll modify the
background-colorof this tag in HTML. - Add a method attribute. Within the pattern above, that is model. Set the attribute with the equal signal “=” adopted by a number of CSS selectors and related values.
- Decide the suitable CSS selector. To set the background colour, we’ll use the CSS selector
background-color. - Use an HTML colour code. Specify your background colour with an HTML colour code, like an HTML colour identify, Hex colour code, RGB worth, or HSL worth.
And that’s it! Your consequence ought to look one thing like this:
What else can I do with HTML background colours?
Now the fundamentals, however there’s rather more you are able to do with HTML background colours. Right here are some things to attempt:
- Need to change only a particular part of your e-mail? You possibly can add background colours to particular parts by referring to their HTML tag, like <div>, <physique>, or <p>.
- Do you suppose plain, strong backgrounds are boring? We do too. You possibly can add gradients to your background colour – extra on that subsequent.
Similar to you’ll be able to set one colour as your background in your HTML e-mail template, you can too specify two colours and mix them with a gradient. This gives an fascinating impact and lets you seamlessly mix two background colours in your e-mail design.
Take a look at the next pattern code, which blends purple and black from left to proper:
<physique model = "background-color: linear-gradient(to proper, #FF0000, #000000);">Is not this gradient nice?</physique>Specify the physique component with the <physique> tag. Then, modify the physique’s <model> attribute by setting background-image to a linear gradient that goes from left to proper, ranging from the colour purple (#ff0000) to black (#000000).
That is the results of the code above:
However what about accessibility?
Keep in mind your colour selections have a serious influence on readability and e-mail accessibility.
You’re already taking an enormous step in the direction of e-mail accessibility when utilizing background colours as an alternative of background pictures. In reality, we don’t advocate utilizing background pictures as a result of they might take longer to load, and a few e-mail purchasers don’t assist them.
However right here’s an important consideration for accessibility…
For the reason that textual content of your e-mail might be positioned on prime of the background, it’s a must to make sure you’re utilizing acceptable colour distinction between the background and textual content colours. In our gradient instance, it’s simple to see that our black textual content would begin disappearing if it went a lot additional.
Clearly, you’ll need mild textual content on a darkish background and vice versa. Nevertheless, take into account that sure colour mixtures are tougher to learn. You’ll additionally want to contemplate individuals with several types of colour blindness when coding background colours. For extra recommendation, take a look at our article on enhancing e-mail accessibility with colour distinction.
How does darkish mode have an effect on HTML e-mail backgrounds?
So that you’ve obtained your colours down pat now, proper? Nicely, not fairly. Remember the fact that a few of your readers might browse your emails in darkish mode. And, e-mail background colours don’t all the time play good with darkish mode. In reality, some e-mail purchasers merely invert your e-mail colours when your subscriber has darkish mode enabled. Learn to optimize your e-mail for darkish mode so your emails show as supposed.
Wrapping up
There are some things to recollect: Utilizing background pictures isn’t all the time a good suggestion as a result of they might take longer to load, some e-mail purchasers don’t assist them, they usually can influence your e-mail’s accessibility. However in the event you do every thing appropriately and set in place the right fallbacks, you’ll be sending lovely, partaking emails very quickly.
Irrespective of the way you code your e-mail background, ensure that to check and preview it earlier than you hit ship. That means you’ll be able to catch potential points in dozens of various e-mail purchasers… which don’t all the time play good along with your code and e-mail design.
Prepared to begin sending the best-looking emails? Examine that your HTML background colours show as supposed with our e-mail testing instruments at Electronic mail on Acid. Strive us out free of charge for seven days!
Creator: The Electronic mail on Acid Group
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising and marketing.
Creator: The Electronic mail on Acid Group
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising and marketing.
