Cores análogas: combinações calmas

Cores análogas são cores vizinhas na roda de cores, como vermelho, laranja e amarelo, ou azul, azul-esverdeado e verde. Como elas compartilham parte da mesma “base”, combinam sem esforço e passam uma sensação de calma. Para usar, escolha uma cor principal e pegue uma ou duas vizinhas de cada lado.

Como achar as vizinhas na roda

Olhe para a roda de cores como um relógio. Cores análogas são as que ocupam horas próximas. A própria roda mostra isso: vermelho, laranja e amarelo são o exemplo mais citado. Entre uma e outra há pouca distância, então uma parece nascer da outra, como as cores do céu no fim da tarde.

Se você escreve CSS, dá para medir. O matiz, que é a posição na roda, vai de 0° a 360°. Na prática, um grupo análogo costuma caber numa faixa de uns 30° a 60° em volta da cor principal. Escolher hsl(20 90% 40%), hsl(35 90% 50%) e hsl(50 90% 60%) já resulta em um trio de vizinhas, do laranja avermelhado ao amarelo. Se o conceito de matiz ainda soa novo, o artigo matiz, saturação e luminosidade explica.

Quando uma paleta de vizinhas é a boa escolha

Para ambientes tranquilos. Cartão de visita de uma terapeuta, capa de caderno, site de uma loja de velas. Onde você quer que o olho passeie sem tropeçar.

Quando você já tem uma foto ou um produto forte. Se a imagem é cheia de cor, uma paleta análoga ao redor dela evita brigar com ela.

Quando você não confia no seu olho ainda. Vizinhas quase nunca “dão errado”. É uma boa área para treinar.

Para fundos e áreas grandes. Uma variação suave entre vizinhas dá profundidade sem chamar atenção.

O risco: a paleta sem ponto de destaque

O ponto fraco das análogas é que tudo parece parecido. O olho não sabe para onde ir. Textos podem se perder, botões podem passar despercebidos. Por isso, nunca confie só nas vizinhas. Faça três ajustes:

1. Varie bastante a luminosidade. Use um tom bem escuro, um médio e um bem claro. A diferença de claro e escuro é o que separa os elementos.
2. Escolha uma cor dominante. Uma das vizinhas fica com a maior parte da área. As outras apoiam.
3. Dê um destaque de fora. Um único toque de cor oposta ou de neutro forte, como um marrom bem escuro, serve de âncora para o olhar. A ideia é parecida com a de cores complementares, mas em dose pequena.

Passo a passo: paleta para a identidade de uma loja de velas

Você vende velas artesanais e quer uma identidade acolhedora, com cara de pôr do sol.

1. Escolha a cor principal. Um laranja-vermelho, #E4572E. Ele será a cor mais presente nos materiais.
2. Pegue uma vizinha de cada lado. Do lado do vermelho, um tom terroso e escuro, #8C2F1B. Do lado do amarelo, um dourado, #E9A23B.
3. Adicione um tom bem claro da mesma família, #FBE3A8, para fundos de etiqueta e cartões.
4. Escolha o texto. Um marrom quase preto, #3A2E2A, que fica de fora do trio mas continua na família quente. Ele serve para nomes, preços e descrição.
5. Verifique o contraste. O texto #3A2E2A sobre o fundo #FBE3A8 dá cerca de 10,4 para 1. Já o dourado #E9A23B sobre o amarelo claro dá só 1,7 para 1, então reserve o dourado para detalhes como filetes e ícones. O terroso #8C2F1B sobre o fundo claro dá 6,6 para 1 e serve para títulos.
6. Decida os papéis. Laranja para o logo e os títulos grandes, terroso para faixas e rodapés, dourado para enfeites, amarelo claro para fundos.

Pronto: quatro cores vizinhas e um neutro de apoio. Para tudo que for ler, a WCAG exige no nível AA pelo menos 4,5 para 1 em texto normal e 3 para 1 em texto grande (a versão 2.2, de outubro de 2023, manteve esses valores).

Análogas frias também funcionam

Nada nas análogas pede calor. Azul, azul-esverdeado e verde formam um trio igualmente harmônico, que muito se vê em marcas de água, de spa e de papelaria. A lógica é a mesma: uma cor dominante, variação de claro e escuro, e um destaque pequeno. Para entender o que muda entre os dois grupos, leia cores quentes e frias.

Deslizes que deixam a paleta de vizinhas sem graça

Pegar vizinhas demais. Se você passa de uns 60° em cada direção, deixa de ser uma paleta análoga e vira uma mistura qualquer. Para um grupo afinado, fique perto.

Usar todas com a mesma saturação e luminosidade. O resultado parece uma mancha. Mexa nos dois botões para dar ritmo.

Esquecer do neutro. Branco, creme, cinza ou marrom escuro dão descanso e deixam as cores respirarem. Uma paleta toda colorida cansa.

Colocar texto de uma vizinha sobre outra. Laranja sobre amarelo, por exemplo, quase some: #E4572E sobre #FBE3A8 dá só 2,9 para 1. Para texto, vá ao extremo do claro ou do escuro.

Achar que é “sem graça” e abandonar. Muitas vezes o que falta é só um destaque. Antes de trocar de esquema, adicione um acento pequeno.

Teste da miniatura

Reduza a imagem a uma miniatura. Você deve perceber uma sensação geral calma e ainda achar com facilidade o título e o botão principal. Se não achar, aumente a distância de luminosidade entre eles e o fundo, ou coloque o acento de fora. Depois olhe em preto e branco: se os elementos ainda se separam, a paleta está bem construída.

Análogas são a escolha segura quando você quer harmonia. Para algo mais variado, a tríade e a complementar dividida dão mais contraste sem perder o controle.