Referência de cor na design de e-mail
Guia abrangente para 13 formatos de cores CSS em 12 clientes de e-mail. Verifique quais formatos são seguros para cada cliente, aprenda as práticas recomendadas e evite armadilhas comuns na renderização de e-mail. Do Gmail ao Outlook Desktop - saiba exatamente quais cores funcionam e onde.
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
Guia de referência de cores do seu e-mail
Tudo que você precisa para escolher o formato de cor certo para cada cliente de e-mail.
- Compatibilidade cliente por cliente Matriz de suporte detalhada para 12 clientes de e-mail, incluindo Gmail, Outlook, Apple Mail, Yahoo e muito mais. Veja exatamente quais formatos de cores funcionam em cada cliente com indicadores claros de suporte/não suporte.
- 13 Formatos de cores analisados Cada formato de cores CSS, de HEX a OKLCH, é classificado quanto à segurança de e-mail. Cada formato inclui exemplos de sintaxe, nível de suporte, classificação de segurança e uma explicação em inglês simples de por que funciona ou não em e-mail.
- 10 dicas críticas de segurança Melhores práticas práticas organizadas por importância - desde regras críticas (sempre use variáveis HEX, nunca variáveis CSS) até técnicas avançadas (modo escuro, fundos à prova de balas). Cada dica inclui tags de categoria para facilitar a filtragem.
- Gratuito e sempre disponível Este guia de referência é totalmente gratuito, sem necessidade de inscrição. Marque-o para seu fluxo de trabalho diário de desenvolvimento de e-mail - todos os dados são locais e carregam instantaneamente, sem dependências externas.
Quem usa a referência de cores do e-mail?
De desenvolvedores de e-mail a engenheiros de controle de qualidade – segurança de cores para todos.
- Fluxo de trabalho do desenvolvedor de email Os desenvolvedores de email usam essa referência diariamente para verificar quais formatos de cores são seguros antes de codificar campanhas. A tabela de compatibilidade rápida fornece respostas instantâneas para os cinco clientes de e-mail mais comuns.
- Campanhas de marketing por e-mail As equipes de marketing usam o guia para garantir que as cores de sua marca sejam renderizadas de forma consistente em todos os clientes de e-mail assinantes. As dicas de segurança ajudam a evitar armadilhas comuns, como gradientes quebrados ou botões invisíveis.
- Transferência do design para o e-mail Os designers usam a referência de formato de cores para entender quais cores de seus designs sobreviverão ao processo de renderização do e-mail, tornando a transferência para o desenvolvimento mais suave e com menos surpresas.
- Desenvolvimento de modelos de email Os desenvolvedores de modelos fazem referência aos detalhes específicos do cliente para criar modelos robustos com substitutos apropriados para Outlook Desktop, Gmail e outros clientes restritivos.
- Aprendendo o desenvolvimento de e-mail Estudantes e desenvolvedores juniores usam o guia para aprender os fundamentos do CSS de e-mail - quais formatos de cores são seguros, por que certos clientes se comportam de maneira diferente e como criar estilos de e-mail à prova de balas.
- Teste de acessibilidade e controle de qualidade Os engenheiros de controle de qualidade usam a referência para verificar se as opções de cores atendem aos padrões de acessibilidade e serão renderizadas corretamente nos clientes de e-mail que seus assinantes usam com mais frequência.
Sobre cores no design de e-mail
Compreender o suporte de cores em clientes de email é essencial para todo desenvolvedor de email.
Perguntas frequentes
O Gmail remove blocos <style> e processa estilos embutidos por meio de uma camada de sanitização que permite apenas um subconjunto de propriedades e valores CSS. RGBA, HSL e outros formatos modernos não estão na lista de permitidos do Gmail. Sempre use códigos HEX de 6 dígitos para compatibilidade com o Gmail.
Hexadecimal de 6 dígitos (#RRGGBB) é o formato de cores mais seguro e universalmente suportado em todos os clientes de e-mail. Todos os principais clientes - incluindo Gmail, Outlook (web e desktop), Apple Mail e Yahoo - renderizam códigos HEX corretamente quando aplicados in-line.
Sim. O Outlook Desktop usa o mecanismo de renderização do Microsoft Word em vez de um navegador da web. Isso significa que ele tem suporte CSS muito limitado – sem RGBA, sem HSL, sem gradientes CSS. É por isso que o Outlook Desktop requer tratamento especial no desenvolvimento de email.
O HSL funciona no Apple Mail, Outlook.com, Samsung Email e no novo Outlook 365 baseado em Chromium. NÃO funciona no Gmail, Yahoo ou no clássico Outlook Desktop. Use HSL como aprimoramento progressivo com um substituto HEX.
Não. Propriedades personalizadas CSS (var(--color)) não são suportadas em nenhum dos principais clientes de e-mail. O Gmail e o Outlook os removem silenciosamente. Nunca use variáveis CSS em e-mails de produção.
HEX (#RRGGBB) tem 6 dígitos e representa cores sólidas. HEX8 (#RRGGBBAA) inclui um canal alfa para transparência. HEX8 não é compatível com Gmail, Outlook Desktop ou Yahoo. Use o HEX padrão de 6 dígitos para e-mail.
Use <meta name="color-scheme" content="light dark"> no seu <head>. Use @media (prefers-color-scheme: dark) em um bloco <style> para fornecer substituições de cores no modo escuro para clientes de suporte.
Sim. À medida que os clientes de e-mail atualizam seus mecanismos de renderização, atualizamos os dados de compatibilidade para refletir o estado atual do suporte de cores do cliente de e-mail.