Wie sorge ich dafür, dass E-Mail-Farben im dunklen Modus funktionieren?

Verwenden Sie in Ihrem . Verwenden Sie @media (prefers-color-scheme: dark) in einem -Block, um Farbüberschreibungen im Dunkelmodus für unterstützende Clients bereitzustellen.

Farbe in der E-Mail-Design-Referenz

Umfassende Anleitung zu 13 CSS-Farbformaten für 12 E-Mail-Clients. Prüfen Sie, welche Formate für jeden Kunden sicher sind, lernen Sie Best Practices kennen und vermeiden Sie häufige Fallstricke bei der E-Mail-Wiedergabe. Von Gmail bis Outlook Desktop – wissen Sie genau, welche Farben wo funktionieren.

Color in Email Design Reference

Comprehensive guide to which color formats work across email clients. Check compatibility, safety ratings, and best practices for email development.

Quick Compatibility Reference

Format	Example	Safety
HEX	color: #FF6600;	✓ Safe
Short HEX	color: #F60;	✓ Safe
RGB	color: rgb(255, 102, 0);	~ Mostly Safe
RGBA	color: rgba(255, 102, 0, 0.5);	! Caution
HSL	color: hsl(24, 100%, 50%);	! Caution
HSLA	color: hsla(24, 100%, 50%, 0.5);	✗ Avoid
Named Colors	color: orange;	~ Mostly Safe
currentColor	border-color: currentColor;	! Caution
CSS Custom Properties	color: var(--color-primary);	✗ Avoid

Color Format Reference

13 formats

HEX (#RRGGBB)

#FF6600

✓ Safe

Standard 6-digit hexadecimal color notation. The universal standard for email.

color: #FF6600;

HEX codes are the most widely supported color format across all email clients. Every major client renders 6-digit HEX correctly. This is the gold standard for email color values.

Short HEX (#RGB)

#F60

✓ Safe

3-digit shorthand hexadecimal notation.

color: #F60;

Short HEX is universally supported but limited to 4096 colours (one nibble per channel). Use for simple colours where #RGB equals #RRGGBB (e.g., #FFF, #000, #F00). Prefer full 6-digit for precision.

HEX8 (#RRGGBBAA)

#FF660080

✗ Avoid

8-digit hex with alpha channel. NOT safe for email.

color: #FF660080;

8-digit HEX with alpha is not supported in Outlook Desktop, Gmail, or Yahoo. Most email developers should avoid it entirely. Use a solid HEX fallback instead.

RGB()

rgb(255, 102, 0)

~ Mostly Safe

RGB functional notation. Widely supported in email.

color: rgb(255, 102, 0);

RGB() is supported by most email clients except older versions of Outlook Desktop. It's a good alternative when you need to programmatically adjust colour values. Always include a HEX fallback.

RGBA()

rgba(255, 102, 0, 0.5)

! Caution

RGB with alpha transparency. Not supported in major clients.

color: rgba(255, 102, 0, 0.5);

RGBA is not supported in Gmail, Yahoo, or Outlook Desktop. Apple Mail supports it well. Use only for progressive enhancement with a solid HEX fallback for the base colour.

HSL()

hsl(24, 100%, 50%)

! Caution

Hue-Saturation-Lightness notation. Support varies.

color: hsl(24, 100%, 50%);

HSL works in Apple Mail, Outlook.com, Samsung Email, and the new Outlook 365. It does NOT work in Gmail, Yahoo, or classic Outlook Desktop. Use for non-critical styling with HEX fallbacks.

HSLA()

hsla(24, 100%, 50%, 0.5)

✗ Avoid

HSL with alpha transparency. Very limited support.

color: hsla(24, 100%, 50%, 0.5);

HSLA inherits all the limitations of HSL plus the alpha channel issues of RGBA. Only works in Apple Mail and a few niche clients. Avoid in production email.

HWB()

hwb(24, 0%, 0%)

✗ Avoid

Hue-Whiteness-Blackness. Not supported in email.

color: hwb(24, 0%, 0%);

HWB is a newer CSS Color Level 4 format. No major email client supports it. Avoid entirely for email development.

OKLCH()

oklch(0.62, 0.15, 24)

✗ Avoid

Perceptually uniform colour space. Not supported in email.

color: oklch(0.62, 0.15, 24);

OKLCH is a modern CSS Color Level 4 format. Not supported in any email client. Use only for tooling and pre-processing, never in email CSS.

LAB / LCH()

lab(62%, 35, 45)

✗ Avoid

CIE Lab colour space. Not supported in email.

color: lab(62%, 35, 45);

CIE Lab and LCH are advanced colour spaces not supported in email clients. Avoid for email output.

Named Colors

orange

~ Mostly Safe

CSS named colours like red, blue, orange, etc. Mixed support.

color: orange;

Basic named colours (red, blue, green, black, white, orange, etc.) are widely supported. Obscure named colours (like rebeccapurple, burlywood) may not render in older email clients. Stick to the 16 basic HTML colour names for safety.

currentColor

currentColor

! Caution

Inherits the current text colour. Support varies.

border-color: currentColor;

currentColor works in Apple Mail and Outlook.com but fails in Gmail and Outlook Desktop. Useful for borders and SVG fills in email, but always provide explicit colour fallbacks.

CSS Custom Properties

var(--color-primary)

✗ Avoid

CSS variables. NOT supported in email.

color: var(--color-primary);

CSS custom properties (CSS variables) are not supported in any major email client. Gmail, Outlook, and Yahoo all strip or ignore them. Never use CSS variables in production email - always use static colour values.

Email Color Safety Tips

Always Use HEX as Your Primary Format

CRITICAL

6-digit HEX codes (#RRGGBB) are the only format guaranteed to render correctly across all email clients. When using modern formats like HSL or RGBA, always provide a HEX fallback as the first declaration.

format

Inline Styles Override Everything

CRITICAL

Many email clients (Gmail, Yahoo, Outlook) strip or ignore <style> blocks. Always inline your colour declarations using the style attribute. Use tools like Juice or CSS inliner for automated conversion.

format

Never Use CSS Custom Properties

CRITICAL

CSS variables (var(--color)) look modern but are completely unsupported across all major email clients. Gmail and Outlook both strip them silently, leaving your email without colour. Always hardcode colour values.

format

Provide Outlook Desktop Fallbacks

Important

Outlook Desktop uses Word's rendering engine and ignores many modern CSS properties. Use conditional comments

fallback

Maintain WCAG Contrast in Email

Important

Email accessibility matters. Ensure your text colours have at least 4.5:1 contrast ratio against backgrounds. Remember that email clients may strip your custom CSS in certain contexts, so test critical colour pairs.

accessibility

Test in Gmail First, Outlook Second

Important

Gmail is the most restrictive major client with 30%+ market share. If your colours work in Gmail, they'll work almost everywhere. Outlook Desktop is the second most important test target due to its unique rendering engine.

testing

Don't Rely on Default Link Colors

Important

Email clients often override link colours with their own defaults. Always set explicit colour and text-decoration on your <a> tags inline. Include :visited and :hover states in <style> for clients that support them.

accessibility

Prepare for Dark Mode

Good to Know

Many email clients now auto-invert colours in dark mode. Use <meta name="color-scheme" content="light dark"> and provide dark mode colour overrides using @media (prefers-color-scheme: dark) in a <style> block for supporting clients.

testing

Gradient Backgrounds Need Fallbacks

Important

CSS gradients in background colours work in Apple Mail and Outlook.com but fail in Gmail and Outlook Desktop. Always set a solid background-color before your gradient declaration. The solid colour will show in non-supporting clients.

fallback

Use Bulletproof Backgrounds for Buttons

Good to Know

For CTA buttons in email, use VML (Vector Markup Language) for Outlook Desktop backgrounds and standard CSS for other clients. This technique ensures buttons have the correct colour in all email environments.

fallback

Email Client Color Support

12 clients

Ihr E-Mail-Farbreferenzhandbuch

Alles, was Sie brauchen, um für jeden E-Mail-Client das richtige Farbformat auszuwählen.

Client-für-Client-Kompatibilität Detaillierte Support-Matrix für 12 E-Mail-Clients, darunter Gmail, Outlook, Apple Mail, Yahoo und mehr. Sehen Sie genau, welche Farbformate in jedem Client funktionieren, mit klaren unterstützten/nicht unterstützten Indikatoren.
13 analysierte Farbformate Jedes CSS-Farbformat von HEX bis OKLCH wird hinsichtlich der E-Mail-Sicherheit bewertet. Jedes Format enthält Syntaxbeispiele, Supportstufe, Sicherheitsbewertung und eine Erklärung in einfachem Englisch, warum es in E-Mails funktioniert oder nicht.
10 wichtige Sicherheitstipps Umsetzbare Best Practices, geordnet nach Wichtigkeit – von kritischen Regeln (verwenden Sie immer HEX-, niemals CSS-Variablen) bis hin zu fortgeschrittenen Techniken (dunkler Modus, kugelsichere Hintergründe). Jeder Tipp enthält Kategorie-Tags zum einfachen Filtern.
Kostenlos und immer verfügbar Dieses Referenzhandbuch ist völlig kostenlos und erfordert keine Anmeldung. Setzen Sie ein Lesezeichen für Ihren täglichen E-Mail-Entwicklungsworkflow – alle Daten sind lokal und werden sofort und ohne externe Abhängigkeiten geladen.

Wer nutzt die E-Mail-Farbreferenz?

Vom E-Mail-Entwickler bis zum QS-Ingenieur – Farbsicherheit für alle.

E-Mail-Entwickler-Workflow E-Mail-Entwickler verwenden diese Referenz täglich, um zu überprüfen, welche Farbformate sicher sind, bevor sie Kampagnen programmieren. Die Schnellkompatibilitätstabelle liefert sofortige Antworten für die fünf gängigsten E-Mail-Clients.
Marketingteams für E-Mail-Marketingkampagnen verwenden den Leitfaden, um sicherzustellen, dass ihre Markenfarben in allen E-Mail-Clients aller Abonnenten konsistent dargestellt werden. Die Sicherheitstipps helfen dabei, häufige Fallstricke wie unterbrochene Farbverläufe oder unsichtbare Schaltflächen zu vermeiden.
Design-zu-E-Mail-Übergabe Designer nutzen die Farbformatreferenz, um zu verstehen, welche Farben aus ihren Designs den E-Mail-Rendering-Prozess überstehen, wodurch die Übergabe an die Entwicklung reibungsloser und mit weniger Überraschungen erfolgt.
Entwicklung von E-Mail-Vorlagen Vorlagenentwickler beziehen sich auf die kundenspezifischen Details, um robuste Vorlagen mit geeigneten Fallbacks für Outlook Desktop, Gmail und andere restriktive Clients zu erstellen.
E-Mail-Entwicklung erlernen Studenten und Nachwuchsentwickler erlernen anhand des Leitfadens die Grundlagen von E-Mail-CSS – welche Farbformate sicher sind, warum sich bestimmte Clients anders verhalten und wie man kugelsichere E-Mail-Stile erstellt.
Zugänglichkeits- und QA-Tests QA-Ingenieure verwenden die Referenz, um zu überprüfen, ob die Farbauswahl den Zugänglichkeitsstandards entspricht und in den E-Mail-Clients, die ihre Abonnenten am häufigsten verwenden, korrekt dargestellt wird.

Über Farbe im E-Mail-Design

Für jeden E-Mail-Entwickler ist es wichtig, die Farbunterstützung in E-Mail-Clients zu verstehen.

Häufig gestellte Fragen

Gmail entfernt <style>-Blöcke und verarbeitet Inline-Stile über eine Bereinigungsebene, die nur eine Teilmenge der CSS-Eigenschaften und -Werte zulässt. RGBA, HSL und andere moderne Formate stehen nicht auf der Liste der zulässigen Formate von Gmail. Verwenden Sie aus Gründen der Gmail-Kompatibilität immer 6-stellige HEX-Codes.

Das 6-stellige Hexadezimalformat (#RRGGBB) ist das sicherste und am häufigsten von allen E-Mail-Clients unterstützte Farbformat. Jeder große Client – einschließlich Gmail, Outlook (sowohl Web als auch Desktop), Apple Mail und Yahoo – stellt HEX-Codes korrekt dar, wenn er inline angewendet wird.

Ja. Outlook Desktop verwendet die Rendering-Engine von Microsoft Word anstelle eines Webbrowsers. Das bedeutet, dass die CSS-Unterstützung sehr eingeschränkt ist – kein RGBA, kein HSL, keine CSS-Verläufe. Aus diesem Grund erfordert Outlook Desktop eine besondere Handhabung bei der E-Mail-Entwicklung.

HSL funktioniert in Apple Mail, Outlook.com, Samsung Email und dem neuen Chromium-basierten Outlook 365. Es funktioniert NICHT in Gmail, Yahoo oder dem klassischen Outlook Desktop. Verwenden Sie HSL als progressive Erweiterung mit einem HEX-Fallback.

Nein. Benutzerdefinierte CSS-Eigenschaften (var(--color)) werden in keinem gängigen E-Mail-Client unterstützt. Sowohl Gmail als auch Outlook entfernen sie stillschweigend. Verwenden Sie niemals CSS-Variablen in Produktions-E-Mails.

HEX (#RRGGBB) ist 6-stellig und steht für Volltonfarben. HEX8 (#RRGGBBAA) enthält einen Alphakanal für Transparenz. HEX8 wird in Gmail, Outlook Desktop oder Yahoo nicht unterstützt. Halten Sie sich für E-Mails an die standardmäßige 6-stellige HEX-Zahl.

Verwenden Sie <meta name="color-scheme" content="light dark"> in Ihrem <head>. Verwenden Sie @media (prefers-color-scheme: dark) in einem <style>-Block, um Farbüberschreibungen im Dunkelmodus für unterstützende Clients bereitzustellen.

Ja. Wenn E-Mail-Clients ihre Rendering-Engines aktualisieren, aktualisieren wir die Kompatibilitätsdaten, um den aktuellen Stand der Farbunterstützung für E-Mail-Clients widerzuspiegeln.