Harmonia de cores: 6 esquemas para combinar cores
Harmonia de cores é o jeito de escolher cores que funcionam juntas a partir da posição delas no círculo cromático. Existem seis esquemas clássicos: complementar (duas cores opostas, a 180°), análogo (vizinhas, a cerca de 30° uma da outra), tríade (três cores a 120°), tetrádico (retângulo ou quadrado, quatro cores), complementar dividido (a base mais as duas vizinhas do seu oposto, a 150° e 210°) e monocromático (um único matiz em várias luminosidades).
Esses esquemas não garantem uma paleta bonita sozinhos, mas dão um ponto de partida coerente. O que transforma a geometria em um bom resultado são as proporções (como na regra 60-30-10), os ajustes de saturação e luminosidade e a checagem de contraste. Neste guia você vê cada esquema com exemplos em HEX, quando usar cada um e como evitar os erros mais comuns.
Como o círculo cromático define as harmonias
Todas as harmonias são relações de ângulo. No modelo HSL, o matiz (hue) é medido em graus de 0° a 360°: 0° é vermelho, 120° é verde e 240° é azul. Somar ou subtrair graus do matiz de uma cor gera suas parceiras de harmonia. Se a sua cor base tem matiz 205°, a complementar fica em 205 + 180 = 385, ou seja, 25° (sempre descontando 360 quando passa da volta).
Para que os exemplos deste guia sejam comparáveis, todos partem da mesma cor base: #2280C3, que corresponde a hsl(205 70% 45%), um azul médio. As outras cores de cada esquema mantêm a mesma saturação (70%) e luminosidade (45%) e mudam apenas o matiz.
Círculo RGB/HSL × círculo RYB
Existe um detalhe que confunde muita gente: há mais de um círculo cromático. O que as ferramentas digitais usam é o círculo RGB/HSL, baseado nas primárias de luz (vermelho, verde e azul). O círculo RYB (vermelho, amarelo e azul) é o tradicional das artes plásticas e das aulas de pintura. Como os dois distribuem os matizes de forma diferente, as complementares também mudam:
- No círculo RYB, o azul é complementar do laranja, o vermelho do verde e o amarelo do roxo.
- No círculo RGB/HSL, o azul é complementar do amarelo, o vermelho do ciano e o verde do magenta.
Nenhum dos dois está “errado”: são modelos com finalidades diferentes. Os ângulos deste guia usam o círculo HSL, porque é ele que você manipula em CSS, no Figma e no gerador de paletas. Por isso a complementar do nosso azul sai um laranja-queimado (25°), e não o laranja “de pintor” que você talvez esperasse. Se quiser entender a diferença entre os modelos em detalhes, veja o guia de teoria das cores e círculo cromático.
Os 6 esquemas lado a lado
A tabela resume a geometria de cada harmonia, quantas cores ela gera, o nível de contraste de matiz que ela produz e onde costuma funcionar melhor.
| Esquema | Ângulos a partir da base | Cores | Contraste de matiz | Melhor uso |
|---|---|---|---|---|
| Complementar | 0° e 180° | 2 | Máximo | Destacar uma chamada para ação, esportes, sinalização |
| Análogo | 0°, −30° e +30° | 3 | Baixo | Fundos, ilustrações, marcas calmas, fotografia |
| Tríade | 0°, 120° e 240° | 3 | Alto | Marcas lúdicas, conteúdo infantil, infográficos |
| Complementar dividido | 0°, 150° e 210° | 3 | Alto, mais suave que o complementar | Interfaces que precisam de destaque sem agressividade |
| Tetrádico (retângulo/quadrado) | 0°, 60°, 180° e 240° / 0°, 90°, 180° e 270° | 4 | Muito alto | Sistemas com várias categorias, dashboards, jogos |
| Monocromático | 0° (varia só a luminosidade e a saturação) | 3 a 6 | Nenhum (só de luminosidade) | Interfaces sóbrias, marcas minimalistas, estados de UI |
Complementar e complementar dividida
Complementar (180°)
Duas cores diametralmente opostas no círculo. Com a nossa base, o par é #2280C3 (205°) e #C36522 (25°). Colocadas lado a lado, cores complementares se intensificam mutuamente, efeito descrito pelo químico Michel-Eugène Chevreul no século XIX como contraste simultâneo. É por isso que o esquema chama tanta atenção.
Use a complementar como destaque, não como divisão igualitária. Uma página meio azul, meio laranja cansa a vista e perde a hierarquia. Funciona muito melhor um layout majoritariamente azul (e neutro) com botões ou selos em laranja.
Cuidado: diferença de matiz não é diferença de luminosidade. No exemplo, #2280C3 e #C36522 têm luminosidade HSL idêntica, e a razão de contraste WCAG entre eles é de apenas 1,05:1. Texto laranja sobre fundo azul, nesse caso, é praticamente ilegível para quem tem baixa visão ou daltonismo.
Complementar dividida (150° e 210°)
Em vez do oposto exato, você usa as duas cores vizinhas dele. Com a base em 205°, as parceiras ficam em 355° e 55°: #2280C3, #C32230 (um vermelho) e #C3B622 (um amarelo-mostarda). O resultado mantém o contraste vibrante da complementar, mas com mais nuance e menos tensão. É uma ótima escolha para quem está começando, porque tolera bem proporções desiguais.
Análoga e monocromática
Análoga (±30°)
Cores vizinhas no círculo, normalmente a 30° uma da outra. A partir da base: #22C3B6 (175°, um verde-água), #2280C3 (205°) e #2230C3 (235°, um azul-anil). A paleta análoga é a mais “natural” de todas, porque lembra o que vemos em paisagens: o mar indo do verde ao azul, um pôr do sol indo do amarelo ao vermelho.
O risco é a falta de foco. Como os matizes são parecidos, nada salta aos olhos. Escolha uma das três como dominante, use outra como apoio e reserve a terceira, ou um neutro bem escuro, para textos e destaques. Paletas análogas também dão ótimos degradês, pois a transição entre matizes próximos não passa por tons acinzentados; teste no gerador de degradê.
Monocromática
Um único matiz em diferentes luminosidades (e, se quiser, saturações). Mantendo 205° e 70% de saturação e variando a luminosidade de 20% a 90%, temos: #0F3957, #175582, #2280C3, #52A5E0, #93C7EC e #D4E8F7.
É o esquema mais seguro para interfaces: é quase impossível errar na combinação, e a hierarquia vem da diferença de luminosidade, que é justamente o que importa para a legibilidade. Por exemplo, #0F3957 sobre #D4E8F7 tem razão de contraste de cerca de 9,6:1. A desvantagem é a monotonia; muitas marcas resolvem isso com uma única cor de destaque fora do matiz.
Tríade, retangular e quadrada
Tríade (120°)
Três cores igualmente espaçadas no círculo. Com a base em 205°: #2280C3, #C32280 (325°, um magenta) e #80C322 (85°, um verde-limão). A tríade é vibrante e equilibrada ao mesmo tempo. Em saturação alta, lembra brinquedos e desenhos animados; com as secundárias dessaturadas ou mais claras, fica bem mais sofisticada.
Tetrádica retangular (0°, 60°, 180° e 240°)
Dois pares complementares formando um retângulo no círculo: #2280C3 (205°), #6522C3 (265°), #C36522 (25°) e #80C322 (85°). Oferece muita variedade, útil quando você precisa distinguir categorias, como em um painel com quatro tipos de dado.
Quadrada (0°, 90°, 180° e 270°)
Quatro cores igualmente espaçadas: #2280C3 (205°), #B622C3 (295°), #C36522 (25°) e #30C322 (115°). É o esquema com mais contraste de matiz, e também o mais difícil de equilibrar.
Nos esquemas de quatro cores, a regra de ouro é: uma cor manda, as outras obedecem. Escolha uma dominante, reduza a saturação ou mude a luminosidade das demais e use-as em áreas pequenas. Quatro cores saturadas em proporções iguais quase sempre resultam em poluição visual.
Proporções: a regra 60-30-10
Escolher as cores é só metade do trabalho; a outra metade é decidir quanto de cada uma aparece. A regra 60-30-10, herdada da decoração de interiores, é um atalho prático:
- 60% para a cor dominante, geralmente um neutro ou uma versão bem clara ou escura da cor principal (fundos, grandes superfícies).
- 30% para a cor secundária (cabeçalhos, cards, blocos de seção, ilustrações).
- 10% para a cor de destaque (botões, links, ícones de alerta, preços).
Aplicando ao esquema complementar do exemplo em um site: 60% de #D4E8F7 e branco nos fundos, 30% de #175582 no cabeçalho, rodapé e títulos, e 10% de #C36522 nos botões de compra. O laranja chama atenção justamente por ser raro na página. Os números não são sagrados (70-20-10 ou 60-35-5 também funcionam); o princípio é evitar que duas cores disputem o protagonismo. O guia de como escolher a paleta de cores de um site mostra como transformar isso em tokens de CSS.
Ajustes finos, contraste e acessibilidade
Varie saturação e luminosidade
Os exemplos acima usam a mesma saturação e luminosidade em todas as cores para deixar a geometria evidente, mas paletas reais quase nunca são assim. Algumas técnicas que fazem uma harmonia “matemática” parecer profissional:
- Crie uma escala para cada cor: uma versão escura para texto, uma média para elementos gráficos e uma bem clara para fundos.
- Dessature as cores de apoio e deixe a saturação máxima só para o destaque.
- Compense a luminosidade percebida: com o mesmo valor de L no HSL, amarelos e verdes parecem bem mais claros que azuis e roxos. Ajuste no olho ou use espaços de cor perceptuais, como o OKLCH.
- Inclua neutros. Cinzas levemente tingidos com o matiz principal amarram a paleta sem competir com ela.
Verifique o contraste
Harmonia não garante legibilidade. A WCAG 2.2 exige razão de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande (nível AA). Branco sobre #2280C3 dá cerca de 4,25:1, o que só passa para texto grande; escurecendo para #175582, sobe para cerca de 7,9:1 e passa até no nível AAA. Confira cada par de texto e fundo no verificador de contraste e leia o guia de contraste e acessibilidade para entender os critérios.
Pense no daltonismo
Cerca de 8% dos homens e 0,5% das mulheres de ascendência europeia têm algum tipo de daltonismo, na maioria das vezes com dificuldade para distinguir vermelho e verde. Esquemas como a tríade e a quadrada podem colocar esses matizes lado a lado. Nunca use a cor como único meio de transmitir informação: combine-a com rótulos, ícones ou padrões, e simule a paleta no simulador de daltonismo.
Resumo e próximos passos
- Complementar para destaque máximo, usando a cor oposta com moderação.
- Complementar dividida para contraste com menos tensão.
- Análoga para composições calmas e degradês suaves.
- Monocromática para interfaces sóbrias e fáceis de manter.
- Tríade e tetrádica para variedade, sempre com uma cor dominante.
- Distribua as cores em proporções desiguais (60-30-10), ajuste saturação e luminosidade e confira o contraste.
Para colocar em prática, gere os esquemas automaticamente no gerador de paletas, capture a cor base de uma foto ou logotipo com o conta-gotas em imagem e crie transições entre as cores escolhidas no gerador de degradê. Se a paleta for para uma marca, vale ler também sobre psicologia das cores. E, para buscar inspiração em cores específicas, explore páginas como azul-marinho, terracota, verde-azulado ou todo o catálogo de cores.