A Information to Coding HTML Background Colours

Black and white is traditional, however how about utilizing HTML/CSS background colours to make your electronic mail advertising and marketing campaigns pop? In spite of everything, colour psychology has a big effect in your readers.

In different articles, we’ve mentioned how one can type your emails with HTML and CSS, and we’ve given you recommendations on how one can code a bulletproof background. Now, we’re going again to fundamentals and speaking about how one can add background colour in HTML and CSS. Let’s dive in.

How do I exploit colours in HTML?

Let’s paint the city crimson. Effectively, not the city, per se. Let’s begin with the background of an HTML electronic mail template.

Right here’s a easy HTML code that units the HTML background colour to crimson:

<physique type="background-color:crimson;">INSERT CONTENT HERE.</physique>

Right here, we used an HTML colour identify, “crimson,” to specify the background-color.

There are just a few methods to refer to colours in HTML, together with:

1. HTML colour identify
2. Hex colour code
3. RGB worth
4. HSL worth

Try this colour picker for the varied 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 technique 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. Try W3C’s helpful record of HTML colour names.

2. Hex colour code

Hex colour codes encompass a hashtag “#” adopted by a sequence of six letters and/or numbers. For instance, the Hex colour code for crimson is #FF0000. You may set your background-color to crimson by way of Hex colour code with the next code:

<physique type="background-color:#FF0000;">INSERT CONTENT HERE.</physique>

3. RGB worth

RGB refers to crimson, inexperienced, and blue. These three colours of sunshine combine to create all different colours, together with white. Utilizing RGB, you may specify a colour with three numeric values, starting from 0 to 255, and representing the values for crimson, inexperienced, and blue. By assigning values to rgb (crimson 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 crimson:

<physique type="background-color:rgb(255,0,0);">INSERT CONTENT HERE.</physique>

On this instance, the primary worth (crimson) is 255, which is the utmost worth, and the following colour values for inexperienced and blue to 0. These values combine, producing the colour crimson.

RBGA provides one other worth to RBG to incorporate extra customization. The final worth, the alpha channel, permits you to specify the opacity of the colour. You may write RBGA as rgb (crimson worth, inexperienced worth, blue worth, alpha worth). Pink, 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. Try the next code, which is a half-transparent crimson background-color:

<physique type="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 just like that for RGB because it consists of three values. Try the pattern code to specify a crimson background utilizing HSL: First, a price from 0 to 255 specifies the hue. Then, a proportion from 0% to 100% signifies the saturation. Lastly, a proportion from 0% to 100% dictates the lightness.

<physique type="background-color:hsl(0,100%,50%);">INSERT CONTENT HERE.</physique>

Identical to with RGBA, HSL may be prolonged with an alpha channel that takes a price between 0 for totally clear to 1.0 for totally opaque. Try 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 type="background-color:hsla(0,100%,50%,.5);">INSERT CONTENT HERE.</physique>

How can I code background colours in an electronic mail?

Now that we all know how one can reference colours we wish to use in HTML electronic mail backgrounds, let’s go over how one can code colours into emails. There are just a few methods so as to add a background colour to your electronic mail:

• Utilizing inline CSS
• Utilizing exterior type sheets
• Utilizing embedded types within the <head> part of your electronic mail 

We used inline CSS to type our background colour within the earlier examples. We’ll proceed to make use of inline CSS on this part since exterior type sheets and embedded types usually break emails and have an effect on your deliverability and accessibility.

When you want a refresher, try our HTML coding 101. With out additional ado, let’s break down the code samples we’ve used thus far.

<physique type="background-color:crimson;">Right here’s some textual content over a crimson background.</physique>

Right here’s how one can add background colour in HTML, based mostly on the earlier code pattern:

1. Establish the HTML aspect you wish to apply the background colour to. On this case, you’ll apply the background colour to the aspect <physique>. Subsequent, you’ll modify the background-color of this tag in HTML.
2. Add a mode attribute. Within the pattern above, that is type. Set the attribute with the equal signal “=” adopted by a number of CSS selectors and related values.
3. Decide the suitable CSS selector. To set the background colour, we’ll use the CSS selector background-color.
4. 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 outcome ought to look one thing like this:

What else can I do with HTML background colours?

Now you recognize the fundamentals, however there’s far more you are able to do with HTML background colours. Right here are some things to strive:

• Wish to change only a particular part of your electronic mail? You may add background colours to particular components by referring to their HTML tag, like <div>, <physique>, or <p>.
• Do you suppose plain, stable backgrounds are boring? We do too. You may add gradients to your background colour – extra on that subsequent. 

Identical to you may set one colour as your background in your HTML electronic mail template, you can too specify two colours and mix them with a gradient. This gives an fascinating impact and permits you to seamlessly mix two background colours in your electronic mail design.

Try the next pattern code, which blends crimson and black from left to proper:

<physique type = "background-color: linear-gradient(to proper, #FF0000, #000000);">Is not this gradient nice?</physique>

Specify the physique aspect with the <physique> tag. Then, modify the physique’s <type> attribute by setting background-image to a linear gradient that goes from left to proper, ranging from the colour crimson (#ff0000) to black (#000000).

That is the results of the code above:

However what about accessibility?

Bear in mind your colour decisions have a significant impression on readability and electronic mail accessibility. 

You’re already taking an enormous step in direction of electronic mail accessibility when utilizing background colours as a substitute of background pictures. Actually, we don’t suggest utilizing background pictures as a result of they might take longer to load, and a few electronic mail purchasers don’t assist them.

However right here’s crucial consideration for accessibility…

For the reason that textual content of your electronic mail might be positioned on prime of the background, you need to make sure you’re utilizing applicable colour distinction between the background and textual content colours. In our gradient instance, it’s straightforward to see that our black textual content would begin disappearing if it went a lot additional.

Clearly, you’ll need gentle textual content on a darkish background and vice versa. Nonetheless, understand that sure colour mixtures are tougher to learn. You’ll additionally want to think about folks with various kinds of colour blindness when coding background colours. For extra recommendation, try our article on bettering electronic mail accessibility with colour distinction.

How does darkish mode have an effect on HTML electronic mail backgrounds?

So that you’ve bought your colours down pat now, proper? Effectively, not fairly. Understand that a few of your readers could browse your emails in darkish mode. And, electronic mail background colours don’t at all times play good with darkish mode. Actually, some electronic mail purchasers merely invert your electronic mail colours when your subscriber has darkish mode enabled. Learn to optimize your electronic mail for darkish mode so your emails show as meant.

Wrapping up

There are some things to recollect: Utilizing background pictures isn’t at all times a good suggestion as a result of they might take longer to load, some electronic mail purchasers don’t assist them, and so they can impression your electronic mail’s accessibility. However when you do every part accurately and set in place the right fallbacks, you’ll be sending lovely, participating emails very quickly.

Regardless of the way you code your electronic mail background, be certain to check and preview it earlier than you hit ship. That manner you may catch potential points in dozens of various electronic mail purchasers… which don’t at all times play good together with your code and electronic mail design.

Prepared to start out sending the best-looking emails? Test that your HTML background colours show as meant with our electronic mail testing instruments at Electronic mail on Acid. Strive us out without spending a dime for seven days!

Creator: The Electronic mail on Acid Crew

The Electronic mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.

Creator: The Electronic mail on Acid Crew

The Electronic mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.