If you think cross-browser color consistency is challenging, email clients are worse. Outlook uses the Word rendering engine. Gmail strips custom styles from the head. Apple Mail supports modern CSS. Yahoo has its own quirks. And dark mode implementations vary wildly. Your PaletteRx palette needs special handling for email.
Inline Styles Only
Most email clients strip or ignore CSS custom properties (variables) and external stylesheets. Email colors must be defined as inline styles with literal hex values: style="color: #4f46e5;". PaletteRx's JSON export gives you the hex values to paste into email templates. Use them directly, not as variable references.
Dark Mode Challenges
Apple Mail, Outlook (iOS), and Gmail (mobile) have dark mode implementations that can invert your colors. Light backgrounds become dark. Dark text becomes light. But the behavior is inconsistent. Some clients invert everything. Some only change the background. Some leave your colors alone. The only defense: test in every major email client.
Safe Practices
Use strong contrast ratios (7:1+) so that even if dark mode shifts your colors slightly, text remains readable. Avoid relying on subtle color differences for meaning (they may be lost in inversion). Include alt text for images and use real text (not text-in-images) so dark mode can adjust it.
CTA Button Colors
Email CTA buttons ("Shop Now," "Read More") should use your primary brand color as a background with white text. Use the VML/CSS hybrid button technique (bulletproof buttons) that works across Outlook and modern email clients. The color is defined inline and survives most rendering engines.