Color in Email Design Reference
Comprehensive guide to 13 CSS color formats across 12 email clients. Check which formats are safe for each client, learn best practices, and avoid common email rendering pitfalls. From Gmail to Outlook Desktop - know exactly which colours work where.
Quick Compatibility Reference
| Format | Example | Gmail | Outlook | Apple Mail | Yahoo | 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
HEX (#RRGGBB)
#FF6600Standard 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)
#F603-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)
#FF6600808-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)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)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%)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)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%)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)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)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
orangeCSS 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
currentColorInherits 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)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
CRITICAL6-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.
formatInline Styles Override Everything
CRITICALMany 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.
formatNever Use CSS Custom Properties
CRITICALCSS 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.
formatProvide Outlook Desktop Fallbacks
ImportantOutlook Desktop uses Word's rendering engine and ignores many modern CSS properties. Use conditional comments <!--[if mso]> for Outlook-specific colour overrides. Wrap modern styles in <!--[if !mso]><!-->
fallbackMaintain WCAG Contrast in Email
ImportantEmail 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.
accessibilityTest in Gmail First, Outlook Second
ImportantGmail 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.
testingDon't Rely on Default Link Colors
ImportantEmail 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.
accessibilityPrepare for Dark Mode
Good to KnowMany 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.
testingGradient Backgrounds Need Fallbacks
ImportantCSS 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.
fallbackUse Bulletproof Backgrounds for Buttons
Good to KnowFor 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.
fallbackEmail Client Color Support
Your Email Color Reference Guide
Everything you need to choose the right colour format for every email client.
Who Uses the Email Color Reference?
From email developers to QA engineers - colour safety for everyone.
About Color in Email Design
Understanding colour support in email clients is essential for every email developer.
What Is the Color in Email Design Reference?
The Color in Email Design Reference is a comprehensive guide for email developers and designers that documents which CSS colour formats work across different email clients. It covers 13 colour formats from basic HEX codes to modern OKLCH, rated for safety across 12 email clients including Gmail, Outlook (web and desktop), Apple Mail, Yahoo, and more. Each format includes syntax examples, support levels, and plain-English explanations.
How to Use This Reference
Start with the Quick Compatibility Reference table at the top for a birds-eye view of which formats work in major clients. Then dive into the Color Format Reference cards for detailed information on each format, including safety ratings and example code. The Safety Tips section provides actionable best practices organised by importance level. Finally, expand individual Email Client Cards to see the full support matrix for each client with specific recommendations.
Why Email Color Support Is Different
Unlike web browsers that all support modern CSS colour formats, email clients vary dramatically in their rendering engines. Gmail and Yahoo use browser-based rendering but strip <style> blocks and ignore many modern CSS properties. Outlook Desktop uses Microsoft Word's rendering engine, which has very limited CSS support. Apple Mail uses WebKit with excellent CSS support. Understanding these differences is critical for building email campaigns that look correct everywhere.
Best Practice for Email Color Safety
The golden rule of email colour is simple: always use 6-digit HEX codes (#RRGGBB) as your primary colour format and always inline your styles. If you use modern formats like HSL or RGBA, always provide a HEX fallback first. Never use CSS custom properties. For Outlook Desktop, use conditional comments to provide VML-based colour fallbacks. Test in Gmail and Outlook Desktop before sending to your full list.
Related Color Tools
Explore more colour reference and accessibility tools.
Frequently Asked Questions
Common questions about using colour in email design.
Gmail strips <style> blocks and processes inline styles through a sanitization layer that only allows a subset of CSS properties and values. This is a security and consistency measure. RGBA, HSL, and other modern formats are not on Gmail's allowed list. Always use 6-digit HEX codes for Gmail compatibility.
6-digit hexadecimal (#RRGGBB) is the safest and most universally supported colour format across all email clients. Every major client - including Gmail, Outlook (both web and desktop), Apple Mail, and Yahoo - renders HEX codes correctly when applied inline.
Yes. Outlook Desktop (2010, 2013, 2016, 2019, and Microsoft 365) uses Microsoft Word's rendering engine rather than a web browser. This means it has very limited CSS support - no RGBA, no HSL, no CSS gradients, and no box shadows. This is why Outlook Desktop requires special handling in email development.
HSL works in Apple Mail, Outlook.com (web), Samsung Email, and the new Chromium-based Outlook 365. It does NOT work in Gmail, Yahoo, AOL, GMX, or classic Outlook Desktop. You can use HSL as a progressive enhancement if you always provide a HEX fallback as the first declaration.
No. CSS custom properties (var(--color)) are not supported in any major email client. Gmail and Outlook both strip them silently, which means your colours will simply disappear. Never use CSS variables in production email - always hardcode your colour values.
HEX (#RRGGBB) is 6 digits and represents solid colours without transparency. HEX8 (#RRGGBBAA) is 8 digits and includes an alpha channel for transparency. HEX8 is not supported in Gmail, Outlook Desktop, or Yahoo. Stick to standard 6-digit HEX for email. If you need transparency effects, use a solid fallback colour.
Use <meta name="color-scheme" content="light dark"> in your <head> to signal dark mode support. Then use @media (prefers-color-scheme: dark) in a <style> block to provide dark mode colour overrides. For clients that strip <style> blocks, this won't work - in those clients, accept that colours may be auto-inverted.
Yes. As email clients update their rendering engines (for example, Outlook 365 moving to Chromium), we update the compatibility data. The reference is maintained to reflect the current state of email client colour support. Bookmark it and check back as email client capabilities continue to improve.