Comment faire fonctionner les couleurs des e-mails en mode sombre ?

Utilisez dans votre . Utilisez @media (prefers-color-scheme: dark) dans un bloc pour fournir des remplacements de couleur en mode sombre pour les clients prenant en charge.

Couleur dans la référence de conception d'e-mails

Guide complet de 13 formats de couleurs CSS sur 12 clients de messagerie. Vérifiez quels formats sont sûrs pour chaque client, découvrez les meilleures pratiques et évitez les pièges courants en matière de rendu des e-mails. De Gmail à Outlook Desktop, sachez exactement quelles couleurs fonctionnent et où.

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

Guide de référence des couleurs de votre e-mail

Tout ce dont vous avez besoin pour choisir le bon format de couleur pour chaque client de messagerie.

Compatibilité client par client Matrice de prise en charge détaillée pour 12 clients de messagerie, notamment Gmail, Outlook, Apple Mail, Yahoo, etc. Découvrez exactement quels formats de couleurs fonctionnent dans chaque client avec des indicateurs clairs pris en charge/non pris en charge.
13 formats de couleur analysés Chaque format de couleur CSS, de HEX à OKLCH, est évalué pour la sécurité des e-mails. Chaque format comprend des exemples de syntaxe, le niveau de support, une évaluation de sécurité et une explication en anglais simple expliquant pourquoi il fonctionne ou non dans le courrier électronique.
10 conseils de sécurité critiques Meilleures pratiques exploitables organisées par importance - des règles critiques (utilisez toujours des variables HEX, jamais CSS) aux techniques avancées (mode sombre, arrière-plans pare-balles). Chaque astuce comprend des balises de catégorie pour un filtrage facile.
Gratuit et toujours disponible Ce guide de référence est entièrement gratuit et aucune inscription n'est requise. Ajoutez-le à vos favoris pour votre flux de travail quotidien de développement de courrier électronique : toutes les données sont locales et se chargent instantanément, sans dépendances externes.

Qui utilise la référence de couleur des e-mails ?

Des développeurs de messagerie aux ingénieurs QA : la sécurité des couleurs pour tous.

Flux de travail des développeurs de courrier électronique Les développeurs de courrier électronique utilisent quotidiennement cette référence pour vérifier quels formats de couleurs sont sûrs avant de coder des campagnes. Le tableau de compatibilité rapide fournit des réponses instantanées pour les cinq clients de messagerie les plus courants.
Campagnes de marketing par e-mail Les équipes marketing utilisent le guide pour garantir que les couleurs de leur marque s'affichent de manière cohérente sur tous les clients de messagerie des abonnés. Les conseils de sécurité permettent d'éviter les pièges courants tels que les dégradés brisés ou les boutons invisibles.
Les concepteurs utilisent la référence du format de couleur pour comprendre quelles couleurs de leurs conceptions survivront au processus de rendu par courrier électronique, rendant ainsi le transfert vers le développement plus fluide et avec moins de surprises.
Développement de modèles de courrier électronique Les développeurs de modèles font référence aux détails spécifiques au client pour créer des modèles robustes avec des solutions de secours appropriées pour Outlook Desktop, Gmail et d'autres clients restrictifs.
Apprentissage du développement de courrier électronique Les étudiants et les développeurs juniors utilisent le guide pour apprendre les principes fondamentaux du CSS de courrier électronique : quels formats de couleurs sont sûrs, pourquoi certains clients se comportent différemment et comment créer des styles de courrier électronique à toute épreuve.
Tests d'accessibilité et d'assurance qualité Les ingénieurs d'assurance qualité utilisent la référence pour vérifier que les choix de couleurs répondent aux normes d'accessibilité et s'afficheront correctement dans les clients de messagerie que leurs abonnés utilisent le plus fréquemment.

À propos de la couleur dans la conception d'e-mails

Comprendre la prise en charge des couleurs dans les clients de messagerie est essentiel pour tout développeur de messagerie.

Foire aux questions

Gmail supprime les blocs <style> et traite les styles en ligne via une couche de nettoyage qui n'autorise qu'un sous-ensemble de propriétés et de valeurs CSS. RGBA, HSL et autres formats modernes ne figurent pas sur la liste autorisée de Gmail. Utilisez toujours des codes HEX à 6 chiffres pour la compatibilité avec Gmail.

Le format hexadécimal à 6 chiffres (#RRGGBB) est le format de couleur le plus sûr et le plus universellement pris en charge par tous les clients de messagerie. Tous les clients majeurs, y compris Gmail, Outlook (Web et ordinateur), Apple Mail et Yahoo, restituent correctement les codes HEX lorsqu'ils sont appliqués en ligne.

Oui. Outlook Desktop utilise le moteur de rendu de Microsoft Word plutôt qu'un navigateur Web. Cela signifie qu'il a un support CSS très limité - pas de RGBA, pas de HSL, pas de dégradés CSS. C'est pourquoi Outlook Desktop nécessite une gestion particulière dans le développement de la messagerie électronique.

HSL fonctionne dans Apple Mail, Outlook.com, Samsung Email et le nouveau Outlook 365 basé sur Chromium. Il ne fonctionne PAS dans Gmail, Yahoo ou Outlook Desktop classique. Utilisez HSL comme amélioration progressive avec une solution de repli HEX.

Non. Les propriétés personnalisées CSS (var(--color)) ne sont prises en charge dans aucun client de messagerie majeur. Gmail et Outlook les suppriment tous deux silencieusement. N'utilisez jamais de variables CSS dans la messagerie de production.

HEX (#RRGGBB) comporte 6 chiffres et représente des couleurs unies. HEX8 (#RRGGBBAA) inclut un canal alpha pour la transparence. HEX8 n'est pas pris en charge dans Gmail, Outlook Desktop ou Yahoo. Tenez-vous-en au HEX standard à 6 chiffres pour les e-mails.

Utilisez <meta name="color-scheme" content="light dark"> dans votre <head>. Utilisez @media (prefers-color-scheme: dark) dans un bloc <style> pour fournir des remplacements de couleur en mode sombre pour les clients prenant en charge.

Oui. À mesure que les clients de messagerie mettent à jour leurs moteurs de rendu, nous mettons à jour les données de compatibilité pour refléter l'état actuel de la prise en charge des couleurs des clients de messagerie.