¿Cómo hago para que los colores del correo electrónico funcionen en modo oscuro?

Utilice en su . Utilice @media (prefers-color-scheme: dark) en un bloque para proporcionar anulaciones de color en modo oscuro para los clientes de soporte.

Color en referencia de diseño de correo electrónico

Guía completa de 13 formatos de color CSS en 12 clientes de correo electrónico. Verifique qué formatos son seguros para cada cliente, conozca las mejores prácticas y evite los problemas comunes de procesamiento de correo electrónico. Desde Gmail hasta Outlook Desktop: sepa exactamente qué colores funcionan y dónde.

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

Su guía de referencia de colores por correo electrónico

Todo lo que necesitas para elegir el formato de color adecuado para cada cliente de correo electrónico.

Compatibilidad cliente por cliente Matriz de soporte detallada para 12 clientes de correo electrónico, incluidos Gmail, Outlook, Apple Mail, Yahoo y más. Vea exactamente qué formatos de color funcionan en cada cliente con indicadores claros de soporte/no soporte.
13 formatos de color analizados Cada formato de color CSS, desde HEX hasta OKLCH, está clasificado para la seguridad del correo electrónico. Cada formato incluye ejemplos de sintaxis, nivel de soporte, calificación de seguridad y una explicación en inglés sencillo de por qué funciona o no en el correo electrónico.
Diez consejos críticos de seguridad Mejores prácticas prácticas organizadas por importancia: desde reglas críticas (use siempre variables HEX, nunca CSS) hasta técnicas avanzadas (modo oscuro, fondos a prueba de balas). Cada consejo incluye etiquetas de categoría para facilitar el filtrado.
Gratis y siempre disponible Esta guía de referencia es completamente gratuita y no es necesario registrarse. Márquelo como favorito para su flujo de trabajo diario de desarrollo de correo electrónico: todos los datos son locales y se cargan instantáneamente sin dependencias externas.

¿Quién utiliza la referencia de color del correo electrónico?

Desde desarrolladores de correo electrónico hasta ingenieros de control de calidad: seguridad del color para todos.

Flujo de trabajo para desarrolladores de correo electrónico Los desarrolladores de correo electrónico utilizan esta referencia a diario para comprobar qué formatos de color son seguros antes de codificar campañas. La tabla de compatibilidad rápida proporciona respuestas instantáneas para los cinco clientes de correo electrónico más comunes.
Campañas de marketing por correo electrónico Los equipos de marketing utilizan la guía para garantizar que los colores de su marca se muestren de forma coherente en todos los clientes de correo electrónico de los suscriptores. Los consejos de seguridad ayudan a evitar errores comunes, como degradados rotos o botones invisibles.
Transferencia del diseño al correo electrónico Los diseñadores utilizan la referencia del formato de color para comprender qué colores de sus diseños sobrevivirán al proceso de representación del correo electrónico, lo que hace que la transferencia al desarrollo sea más fluida y con menos sorpresas.
Desarrollo de plantillas de correo electrónico Los desarrolladores de plantillas hacen referencia a los detalles específicos del cliente para crear plantillas sólidas con respaldos adecuados para Outlook Desktop, Gmail y otros clientes restrictivos.
Aprendizaje sobre el desarrollo del correo electrónico Los estudiantes y desarrolladores junior utilizan la guía para aprender los fundamentos del CSS del correo electrónico: qué formatos de color son seguros, por qué ciertos clientes se comportan de manera diferente y cómo crear estilos de correo electrónico a prueba de balas.
Accesibilidad y pruebas de control de calidad Los ingenieros de control de calidad utilizan la referencia para verificar que las opciones de color cumplan con los estándares de accesibilidad y se muestren correctamente en los clientes de correo electrónico que sus suscriptores utilizan con más frecuencia.

Acerca del color en el diseño de correo electrónico

Comprender la compatibilidad con el color en los clientes de correo electrónico es esencial para todo desarrollador de correo electrónico.

Preguntas frecuentes

Gmail elimina los bloques <style> y procesa los estilos en línea a través de una capa de desinfección que solo permite un subconjunto de propiedades y valores CSS. RGBA, HSL y otros formatos modernos no están en la lista permitida de Gmail. Utilice siempre códigos HEX de 6 dígitos para la compatibilidad con Gmail.

El hexadecimal de 6 dígitos (#RRGGBB) es el formato de color más seguro y universalmente compatible en todos los clientes de correo electrónico. Todos los clientes principales, incluidos Gmail, Outlook (tanto web como de escritorio), Apple Mail y Yahoo, procesan códigos HEX correctamente cuando se aplican en línea.

Sí. Outlook Desktop utiliza el motor de renderizado de Microsoft Word en lugar de un navegador web. Esto significa que tiene un soporte CSS muy limitado: ni RGBA, ni HSL, ni gradientes CSS. Es por eso que Outlook Desktop requiere un manejo especial en el desarrollo del correo electrónico.

HSL funciona en Apple Mail, Outlook.com, Samsung Email y el nuevo Outlook 365 basado en Chromium. NO funciona en Gmail, Yahoo ni el Outlook Desktop clásico. Utilice HSL como mejora progresiva con un respaldo HEX.

No. Las propiedades personalizadas de CSS (var(--color)) no son compatibles con ningún cliente de correo electrónico importante. Tanto Gmail como Outlook los eliminan silenciosamente. Nunca utilice variables CSS en el correo electrónico de producción.

HEX (#RRGGBB) tiene 6 dígitos y representa colores sólidos. HEX8 (#RRGGBBAA) incluye un canal alfa para mayor transparencia. HEX8 no es compatible con Gmail, Outlook Desktop o Yahoo. Cíñete al estándar HEX de 6 dígitos para el correo electrónico.

Utilice <meta name="color-scheme" content="light dark"> en su <head>. Utilice @media (prefers-color-scheme: dark) en un bloque <style> para proporcionar anulaciones de color en modo oscuro para los clientes de soporte.

Sí. A medida que los clientes de correo electrónico actualizan sus motores de renderizado, actualizamos los datos de compatibilidad para reflejar el estado actual de la compatibilidad con el color del cliente de correo electrónico.