Resumo rápido
- As 26 combinações vêm com código HEX e contraste medido pela fórmula da WCAG.
- Para texto, use pares com 4,5:1 ou mais, como carvão e amarelo (14,2:1).
- Pares entre 3:1 e 4,5:1 servem para título e ícone; abaixo de 3:1, só para fundo.
- Antes de fechar a paleta, teste no celular, em preto e branco e sem depender de vermelho contra verde.
As melhores combinações de cores são as que têm contraste suficiente para o que você vai fazer com elas. Se a paleta vai carregar texto, as duas cores precisam de pelo menos 4,5:1 de contraste. Se vai só enfeitar um fundo, dá para usar tons suaves que ficariam ilegíveis numa legenda.
Por isso juntei 26 combinações com código HEX e medi o contraste de cada uma pela fórmula da WCAG. Elas estão separadas em três grupos: boas para texto, boas para título e destaque, e boas só para fundo. Assim você copia o código e já sabe onde a paleta funciona, seja numa thumbnail, num carrossel, num logo ou num site.
Como medi o contraste das 26 combinações
A WCAG 2.2, a diretriz de acessibilidade do W3C, pede contraste mínimo de 4,5:1 entre texto e fundo. Para texto grande, de 18 pontos ou 14 pontos em negrito, o mínimo cai para 3:1. Ícones, botões e partes de gráfico que a pessoa precisa enxergar também pedem 3:1 contra a cor vizinha.
Para cada paleta, calculei a razão de contraste entre as duas cores mais distantes dela. A escala vai de 1:1 (mesma cor) a 21:1 (preto no branco). Se quiser conferir ou testar uma variação, cole os dois códigos no verificador de contraste da WebAIM, que dá o resultado na hora.
Leia as tabelas assim:
- 4,5:1 ou mais: serve para texto corrido, legenda de carrossel e botão.
- 3:1 a 4,5:1: serve para título grande, ícone e destaque, mas não para parágrafo.
- Abaixo de 3:1: serve para fundo, ilustração e detalhe. O texto precisa de uma terceira cor, como preto ou branco.
Quais são as 3 melhores combinações de cores?
Se eu tivesse que escolher só três para um criador de conteúdo usar em tudo, ficaria com estas:
- Carvão e amarelo (#101820 e #FEE715), com contraste de 14,2:1. Chama atenção em thumbnail e continua legível em tela pequena.
- Azul-marinho e rosa-claro (#2F3C7E e #FBEAEB), com 8,7:1. Fica sóbrio sem ser frio e funciona bem em carrossel com bastante texto.
- Azul royal escuro e amarelo-pálido (#234E70 e #FBF8BE), com 8,0:1. Passa confiança e serve para quem vende serviço, consultoria ou curso.
As três passam folgado do 4,5:1. Dá para escrever um parágrafo inteiro de uma cor sobre a outra sem cansar a vista.
Combinações de cores para usar com texto (4,5:1 ou mais)
Estas aguentam texto de qualquer tamanho. São as mais seguras para quem está montando a identidade visual do perfil ou do site pela primeira vez. Se o logo ainda nem existe, vale testar a paleta junto com as ferramentas que geram logo com IA.
| # | Combinação | Códigos HEX | Contraste | Onde usar |
|---|---|---|---|---|
| 1 | Carvão e amarelo | #101820, #FEE715 | 14,2:1 | Thumbnail, capa de Reels, logo |
| 2 | Azul claro e azul escuro | #ADD8E6, #00008B | 10,0:1 | Site, apresentação, material corporativo |
| 3 | Bege, preto-marrom e caramelo | #DDC3A5, #201E20, #E0A96D | 9,8:1 | Marca de café, comida, produto artesanal |
| 4 | Azul-marinho e rosa-claro | #2F3C7E, #FBEAEB | 8,7:1 | Carrossel com muito texto, e-book |
| 5 | Vermelho-cereja e off-white | #990011, #FCF6F5 | 8,3:1 | Impresso, cardápio, marca clássica |
| 6 | Azul royal escuro e amarelo-pálido | #234E70, #FBF8BE | 8,0:1 | Consultoria, finanças, curso |
| 7 | Verde-limão e azul elétrico | #CCF381, #4831D4 | 6,3:1 | Tecnologia, moda, público jovem |
| 8 | Amarelo e verde-floresta | #FFE77A, #2C5F2D | 6,1:1 | Marca ligada a natureza e plantas |
| 9 | Coral, marrom-maçã e pêssego | #FC766A, #783937, #F1AC88 | 4,5:1 | Beleza, decoração, ilustração quente |
Um cuidado com a número 9: o par marrom e pêssego passa no limite exato de 4,5:1. Use o marrom para o texto e o pêssego para o fundo, nunca o coral com o marrom, que fica em 3,3:1.
Combinações para títulos e destaques (3:1 a 4,5:1)
Aqui o contraste dá conta de título grande, ícone e botão com letra em negrito. Para parágrafo, complete com preto, branco ou um cinza bem escuro.
| # | Combinação | Códigos HEX | Contraste | Onde usar |
|---|---|---|---|---|
| 10 | Escarlate, oliva-claro e verde-água claro | #B85042, #E7E8D1, #A7BEAE | 4,0:1 | Ilustração, editorial, marca madura |
| 11 | Mostarda, sálvia e verde-floresta | #E3B448, #CBD18F, #3A6B35 | 3,9:1 | Marca natural, embalagem, site |
| 12 | Azul, vinho e índigo | #408EC6, #7A2048, #1E2761 | 3,9:1 | Tecnologia, app, apresentação |
| 13 | Azul royal e pêssego | #00539C, #EEA47F | 3,8:1 | Logo, destaque em site |
| 14 | Lavanda e verde-petróleo | #E2D1F9, #317773 | 3,7:1 | Produto infantil, bem-estar |
| 15 | Verde-floresta e verde-musgo | #2C5F2D, #97BC62 | 3,5:1 | Sustentabilidade, ONG |
| 16 | Vermelho-cereja e rosa-chiclete | #CC313D, #F7C5CC | 3,4:1 | Moda, confeitaria, produto ousado |
| 17 | Pêssego e laranja queimado | #FCEDDA, #EE4E34 | 3,2:1 | Evento, estilo de vida, decoração |
Azul royal e pêssego (13) ficam em lados opostos da roda de cores, por isso o par chama tanta atenção. Se quiser usar o azul #00539C como cor de texto, coloque sobre branco: o contraste sobe para 7,7:1.
Combinações de cores legais para fundo e decoração (abaixo de 3:1)
São as paletas mais divertidas da lista e as que mais dão problema quando alguém tenta escrever uma cor sobre a outra. Use como fundo, moldura, ilustração ou padrão, e deixe o texto em preto ou branco.
| # | Combinação | Códigos HEX | Contraste | Onde usar |
|---|---|---|---|---|
| 18 | Framboesa e tons de azul | #8A307F, #79A7D3, #6883BC | 2,9:1 | Fundo de post, gradiente |
| 19 | Verde-ilha e branco | #2BAE66, #FCF6F5 | 2,7:1 | Fundo limpo, marca minimalista |
| 20 | Fúcsia e verde neon | #EC449B, #99F443 | 2,6:1 | Moda, festa, arte com muita energia |
| 21 | Roxo-claro, menta e manteiga | #AA96DA, #C5FAD5, #FFFFD2 | 2,5:1 | Embalagem, convite, papelaria |
| 22 | Coral e amarelo | #F96167, #F9E795 | 2,4:1 | Fundo de story, ilustração alegre |
| 23 | Azul-bebê e branco | #8AAAE5, #FFFFFF | 2,3:1 | Saúde, infantil, fundo suave |
| 24 | Rosa quente e ciano | #FF69B4, #00FFFF | 2,1:1 | Estética retrô e cyberpunk |
| 25 | Laranja pastel, pêssego e creme | #FFA351, #FFBE7B, #EED971 | 1,4:1 | Fundo de cosmético, degradê |
| 26 | Azul-céu e rosa-chiclete | #89ABE3, #EA738D | 1,2:1 | Produto infantil, padrão decorativo |
A número 26 é o caso mais extremo: as duas cores parecem bem diferentes, mas têm quase a mesma luminosidade. Em tela com brilho baixo, ou para quem enxerga cores de outro jeito, elas se misturam. Bonita como estampa, ruim como texto.
O que faz duas cores combinarem: roda de cores em 5 minutos
A roda de cores organiza as cores primárias (vermelho, amarelo, azul), as secundárias (laranja, verde, violeta) e as terciárias, que nascem da mistura de uma primária com uma secundária. Passando uma linha pelo meio, você separa as cores quentes (vermelhos, laranjas, amarelos) das frias (azuis, verdes, violetas).
A partir dela saem as combinações clássicas:
- Complementares: cores em lados opostos da roda, como azul e laranja. Dão o maior choque visual, bom para destaque.
- Análogas: duas a cinco cores vizinhas, como amarelo, amarelo-esverdeado e verde. Passam harmonia, uma domina e as outras acompanham.
- Tríade: três cores com a mesma distância entre si, formando um triângulo na roda, como vermelho, amarelo e azul. Rendem paletas vivas.
- Tetrádica: quatro cores formando um quadrado ou retângulo na roda. É a mais difícil de equilibrar.
- Monocromática: tons claros e escuros da mesma cor, como o par azul claro e azul escuro da tabela de texto.
A roda diz quais cores conversam entre si. O contraste diz se dá para ler. Uma combinação pode ser harmônica e mesmo assim ilegível, e a tabela de decoração está cheia de exemplos assim. Para montar variações a partir de uma cor que você já usa, a roda de cores do Adobe Color gera complementares, análogas e tríades de graça.
Como aplicar a paleta: regra 60-30-10
Uma regra prática muito usada em decoração e design é dividir a área assim:
- 60% para a cor dominante, quase sempre o fundo;
- 30% para a cor secundária, em blocos, cards e títulos;
- 10% para a cor de destaque, reservada para botão, seta ou palavra que precisa saltar.
No carrossel do Instagram, por exemplo, o fundo fica com a cor dominante, o texto com a secundária e a palavra-chave de cada slide com o destaque. Quando você repete essa divisão em todo post, o perfil começa a ser reconhecido antes mesmo de alguém ler o nome. Se o que pesa para você é manter o ritmo de posts, o AI Maestro planeja, escreve e publica conteúdo em 8 redes com IA, e a paleta fixa cuida para que tudo saia com a mesma cara.
Checklist antes de fechar sua paleta
Antes de pintar o logo, o site e os templates com as cores novas, passe por esta lista:
- Meça o contraste do par de texto. Se ficar abaixo de 4,5:1, troque a cor do texto por preto, branco ou um tom bem escuro da própria paleta.
- Não use só vermelho contra verde para passar informação. O tipo mais comum de daltonismo dificulta justamente separar vermelho de verde, segundo o National Eye Institute. Em gráfico ou legenda, junte a cor com ícone, rótulo ou padrão.
- Veja no celular com brilho baixo. É assim que boa parte do seu público vai ver o post.
- Teste em preto e branco. Tire um print e converta para escala de cinza. Se título e fundo virarem o mesmo cinza, falta contraste.
- Anote os códigos HEX num lugar só. Uma nota com as cores e a função de cada uma (fundo, texto, destaque) evita que cada post saia com um tom diferente. Se você monta os posts no Canva, salve um template já com as cores aplicadas.
Perguntas frequentes
Quais cores combinam entre si?
As cores que combinam com mais facilidade são as complementares (opostas na roda, como azul e laranja), as análogas (vizinhas, como verde e amarelo) e os tons da mesma cor. Na prática, qualquer par funciona se houver uma cor clara e uma escura com contraste suficiente para o uso.
Qual a melhor combinação de cores para texto?
Preto no branco tem o contraste máximo, de 21:1. Entre as paletas coloridas desta lista, carvão e amarelo (14,2:1) e azul claro com azul escuro (10,0:1) são as mais legíveis.
Como saber se duas cores combinam?
Cole os dois códigos HEX num verificador de contraste e confira se o resultado passa de 4,5:1 para texto ou de 3:1 para título e ícone. Depois olhe a posição das duas na roda de cores para entender se o efeito é de choque (complementares) ou de harmonia (análogas).
Quais cores evitar juntas?
Evite pares com luminosidade parecida, como azul-céu e rosa-chiclete, quando um deles tiver que carregar texto. Evite também depender só de vermelho contra verde para passar informação, porque é a diferença mais difícil de ver para quem tem daltonismo.
Próximo passo
Escolha uma combinação das tabelas, copie os códigos HEX e monte três posts seguidos com ela usando a regra 60-30-10. Se quiser que o conteúdo desses posts saia planejado, escrito e publicado nas redes com IA, conheça o AI Maestro.
E se curte esse tipo de dica para criador de conteúdo, me segue no Instagram, no TikTok e no YouTube.