A melhor maneira de codificar cores e gradientes de fundo de e-mail em HTML

Ou adicione cor a uma célula específica da tabela:

E é isso mesmo!

Teste de controle de qualidade as cores de fundo do seu e-mail e muito mais Você fez isso certo? Veja como seu e-mail aparece nos clientes de e-mail mais populares - para que você possa garantir uma experiência do assinante na marca e livre de erros. Aprenda como →

Como criar um fundo gradiente

Quando você quiser aumentar um nível as cores do plano de fundo, tente adicionar gradientes.

Gradientes CSS não são suportados em todos os lugares, mas existem alternativas que tornam possível renderizar um gradiente em quase todos os clientes de e-mail.

Suporte ao cliente de e-mail para fundos gradientes

Veja como você pode começar.

1. Aplique planos de fundo gradientes lineares CSS a uma tabela ou célula de tabela

Assim como você faria com planos de fundo de cores sólidas, aplique planos de fundo gradientes lineares CSS a uma tabela ou célula de tabela, ou a um div (veremos uma solução alternativa do Outlook em breve), para criar algo como este:

Neste exemplo, o gradiente inclui três cores: roxo, magenta e laranja. O estilo começa dentro do HTML com uma alternativa de cor sólida aplicada ao atributo bgcolor. Em seguida, dentro dos estilos CSS embutidos, repetimos esse fallback usando a propriedade background e o método RGB.

Para criar o gradiente linear, incluímos a propriedade background novamente e aplicamos o estilo gradiente linear. Como o gradiente que estamos criando é renderizado diagonalmente do canto superior esquerdo para o canto inferior direito, começamos com a sintaxe do ângulo do gradiente (315deg). Então, na ordem em que queremos que as cores apareçam, usamos o método RGBA para declarar cada cor.

Após o estilo de cor RGBA, inclua a posição em que deseja que essa cor apareça. Isso ajudará a misturar bem as cores. Para ter uma ideia de como selecionar uma posição de cor, você pode usar um gerador online de gradiente CSS.

Você deve terminar com um código semelhante a este:

2. Crie um substituto para o Outlook com gradientes VML

Muitos de seus assinantes usam o Outlook? Em seguida, você precisará usar a linguagem de marcação vetorial (VML) para adicionar o gradiente de fundo.

Os gradientes VML funcionam melhor com duas cores. Existe a opção de fazer três ou mais cores, mas parece muito com algo do início dos anos 1990, e não há muito controle sobre o que você pode fazer para domesticá-lo. Se você quiser três ou mais gradientes de cor, é melhor usar uma imagem (e mostrarei como na próxima etapa).

Para gradientes VML baseados em imagem, você terá que brincar com o tamanho da imagem para descobrir a melhor maneira de fazê-la preencher o espaço. Você pode usar os atributos type = ”frame” ou type = ”tile”. Acho que gradientes finos realmente longos funcionam bem para type = ”tile”, enquanto imagens curtas de gradiente amplo funcionam melhor com type = ”frame”.

A melhor maneira de ver o que funciona é colocar a imagem e ver como fica no Litmus.

3. Crie um substituto baseado em imagem para Outlook, Yahoo e AOL

Se você tem assinantes no Yahoo, AOL, Outlook (iOS e Android) e Outlook.com, pode criar fallbacks baseados em imagem para eles.

Adicione uma classe de “gradiente” à célula ou tabela em que deseja que o gradiente seja aplicado. Em seguida, usando diferentes métodos de direcionamento, você pode atribuir uma imagem de fundo CSS para substituir o estilo CSS do gradiente onde o gradiente não aparece.

Para direcionar o Outlook.com, use algo assim:

Para segmentar Yahoo e AOL, use:

Para direcionar os clientes móveis do Outlook, use:

Criamos um fallback baseado em imagem para nosso gradiente de exemplo. Para que isso se repetisse, tivemos que dizer adeus ao ângulo do gradiente e organizar nossas cores para serem exibidas de cima para baixo:

4. Use uma cor sólida substituta para todos os outros clientes de e-mail

Para os clientes de e-mail que não suportam nenhuma das correções, certifique-se de fornecer uma cor sólida de fallback.

Nesse caso, use o atributo bgcolor com a cor HEX de 6 dígitos para fornecer a cor substituta para clientes de desktop do Windows 10 e Office 365. Web.de usará a propriedade CSS background como fallback.

Portanto, se você deseja colorir todo o fundo de uma tabela, o código final a ser usado inline em seus e-mails é:

Ou use este código se quiser colorir apenas uma célula específica da tabela:

Se você não está familiarizado com VML e deseja ter certeza de que está correto, o Campaign Monitor possui uma ferramenta útil desenvolvida por Stig para adicionar imagens de plano de fundo ao e-mail. Você pode usar a mesma ferramenta e substituir v: fill type = ”tile” por v: fill type = ”gradiente” para criar um gradiente. Certifique-se de declarar as cores do gradiente inicial e final com color = ”” e color2 = ”” e remova o atributo src = ”” . Nos exemplos acima, use v: fill type = ”frame” para garantir que uma imagem se estenda por todo o frame e não se repita. Essa também é uma ótima solução para imagens de fundo de retina, mas deixaremos isso para Courtney Fantinato.

Não se esqueça do modo escuro

Exatamente quando o suporte à cor de fundo estava ficando melhor, o Modo escuro foi adicionado à mistura.

Esta oportunidade de criar uma experiência de leitura sob medida com base nas preferências de contraste do assinante é uma grande vitória para acessibilidade, mas outro obstáculo para designers e desenvolvedores de e-mail.

O guia definitivo para e-mail no modo escuro Otimizar e-mails para o modo escuro pode ser complicado. Confira nosso guia definitivo para dicas de codificação e design para criar a melhor experiência de assinante de e-mail no modo escuro da marca. Obtenha seu guia prático →

Embora clientes de e-mail como Apple Mail, iPad, aplicativos de e-mail nativos do iPhone, HEY e o aplicativo Outlook possam ser direcionados com estilo CSS incorporado, também há clientes de e-mail que usam sua própria renderização padrão para oferecer uma solução de Modo Escuro.

Os aplicativos Outlook.com, Office 365 e Gmail para iOS e Android invertem as cores parcial ou totalmente para criar uma experiência no modo escuro, às vezes com resultados horríveis.

Não há como substituir essa inversão de cores ainda. No entanto, há algumas coisas que você pode considerar para melhorar a renderização de emails nesses ambientes.

Dica nº 1: faça escolhas de design informadas com testes de cores

Pode ser um pouco doloroso ver suas cores sendo ajustadas de maneiras que você não pretendia. E é um tanto preocupante quando uma cor não muda, mas a cor de uma fonte muda - e todas as suas considerações de acessibilidade saem do ar.

Vale a pena testar as cores da sua marca em clientes de e-mail que invertem as cores para o Modo escuro para ver como são alteradas. Depois de ter uma ideia de como suas cores são renderizadas, você pode fazer escolhas de cores informadas no estágio de design.

Fizemos um teste semelhante para ver como algumas de nossas cores e tons se aplicavam a clientes de e-mail sobre os quais não tínhamos controle:

Descobrimos que usar um tom claro resultou na inversão das cores do fundo e do texto razoavelmente bem. E embora as cores que renderizam uma vez invertidas não façam parte de nossa paleta de cores, podemos oferecer uma experiência de leitura acessível nesses clientes de e-mail.

Dica nº 2: use correções parciais para aplicativos do Gmail

Maneiras de controlar a inversão de cores nos aplicativos do Gmail surgiram, graças aos esforços incansáveis ​​da comunidade de e-mail.

substituindo as cores do modo escuro do macOS / iOS:

Para cores de fundo, use um gradiente de uma cor:
imagem de fundo: gradiente linear (# ffffff, # ffffff)

Não consigo nem acreditar que isso funciona, mas funciona ... até meus botões são de marca.
Agradecimentos a @ThiesBW #emailgeeks

- Annett Forcier (@The_Annett) 11 de dezembro de 2019

Ao aplicar um gradiente linear contendo a cor do plano de fundo aos elementos do contêiner, você pode forçar a cor escolhida a aparecer nos ambientes de modo claro e escuro do Gmail.

Para fazer isso, você precisa adicionar seu gradiente linear à propriedade CSS da imagem de fundo usando o método de cor HEX. Em seguida, faça com que ambas as cores em seu gradiente sejam a cor que deseja que o Gmail honre, assim:

Remi Parmentier expandiu esta solução alternativa para evitar que as cores do texto sejam invertidas em aplicativos do Gmail usando modos de mesclagem CSS.

Usar essas correções pode ajudá-lo a controlar alguns aspectos da renderização invertida. No entanto, isso só é possível no Gmail e não oferece a flexibilidade de alterar as cores do seu e-mail dependendo do modo de contraste selecionado pelos assinantes.

Tão frustrante quanto não ser capaz de direcionar os clientes de e-mail que invertem suas cores, você pode recuperar um pouco de controle: testando sua paleta de cores, fazendo escolhas de cores com base nos resultados dos testes e trabalhando com essas correções parciais.

Impressione seus assinantes com cores

A cor é uma ótima maneira de adicionar algum dinamismo à experiência do assinante e manter o conteúdo do seu e-mail organizado. E leva menos tempo e recursos do que imagens! É uma situação em que todos ganham.

Portanto, comece com este guia - e mal podemos esperar para ver seus planos de fundo coloridos em nossas caixas de entrada.

Certifique-se de que suas cores apareçam corretamente Os assinantes veem seus e-mails da maneira que você pretendia? Visualize a aparência de seus e-mails em mais de 90 clientes de e-mail, aplicativos e dispositivos - com o Litmus Email Previews. Comece sua avaliação gratuita do Litmus →

Publicado originalmente em 27 de março de 2018, por Justine Jordan. Última atualização em 21 de abril de 2021.