Background Colors

Background colors are one of the most powerful styling tools in email design — they create visual hierarchy, define content sections, and reinforce your brand. But in email, background colors behave differently depending on the layer you apply them to and the email client rendering them.

This guide covers every level of background color in the Email Love Figma Plugin, from the outermost page background to individual component backgrounds, plus dark mode considerations and common gotchas.

Emails have multiple nested layers, and each one can have its own background color. Think of it like nesting boxes:

Outer Background (Page Background) → Wrapper Background → Section Background → Column Background → Content Element Background

Each layer sits inside the one before it. The outer background fills the entire email viewport (the area surrounding your content), while inner backgrounds apply to progressively smaller containers.

This is the color that fills the space outside your email content — the "frame" that surrounds your email. Most email clients display this color in the area beyond the 640px content width.

To set it:

This is commonly set to a light gray (#f4f4f4 or similar) to create contrast with a white content area, though some brands use their brand color here for a bolder look.

This is the background color of the main content area — the container that holds all your sections. It typically sits within the 640px content width.

To set it:

Most emails use white (#ffffff) here, but you can use any color. Keep in mind that this color will show behind all your sections unless those sections have their own background color set.

You can set unique background colors on individual sections and wrappers to create distinct visual blocks in your email. This is great for differentiating your header from the body, creating colored callout bands, or styling your footer differently.

To set a section or wrapper background:

For example, you might set your header wrapper to your brand color, your main content sections to white, and your footer to a dark gray — creating clear visual separation between each part of your email.

You can also set background colors on individual columns within a section. This is useful for multi-column layouts where you want one column to stand out, such as a sidebar with a different background or a highlighted feature column.

Select the column in Figma's layers panel and apply a fill color just as you would for a section.

The Email Love plugin lets you specify separate background colors for dark mode. This is important because your carefully chosen light-mode palette may become unreadable when email clients invert colors.

Dark mode background color support varies significantly across email clients:

Because client support is inconsistent, design your dark mode colors defensively. Ensure text remains readable even if the email client ignores your dark mode background and applies its own transformations.

Maintain brand consistency. Use your brand's color palette for backgrounds. The outer background and content background should complement your brand, not fight it.

Create visual hierarchy with contrast. Use different background colors to guide the reader's eye. A colored header on a white body with a gray footer is a classic pattern that works well across all clients.

Keep it simple. Using too many different background colors creates visual noise. Two to three background colors (plus white) is usually enough.

Watch your text contrast. Always check that your text is readable against its background. Dark text on light backgrounds or light text on dark backgrounds — avoid medium grays on medium backgrounds where readability suffers.

Be cautious with gradients. Email clients don't reliably support CSS gradients on background colors. If you need a gradient, consider using a background image instead (with a solid color fallback for clients that don't support background images).

"My background color isn't showing up in the export"

Make sure you're setting the fill color on the correct layer. If you set a fill on a text element or image, it won't export as a background color. Background colors should be set on wrappers, sections, or columns.

"My background color looks different in Outlook"

Outlook (Windows) uses Word's rendering engine, which can sometimes interpret background colors differently. If you're seeing slight color shifts, check that you're using a hex code rather than an RGBA value — Outlook handles transparency poorly.

"Dark mode is overriding my carefully chosen colors"

Some email clients (especially Gmail on Android) aggressively transform colors in dark mode, ignoring your specified dark mode palette. There's no way to fully prevent this. Design your emails so they look acceptable even with automatic color transformations — strong contrast and readable text are more important than pixel-perfect dark mode colors.

"The outer background color only shows on some clients"

Some webmail clients (like Gmail) clip the outer background to the content width. This is a known limitation. If the outer background is crucial to your design, test across your target clients.

Need help choosing the right background colors for your emails? Reach out to support@emaillove.com — our team has 15+ years of email design experience.