Cores quentes e frias: como usar a temperatura de propósito

Cores quentes e frias são as duas metades do círculo cromático. Vermelhos, laranjas e amarelos parecem quentes, como fogo e luz do sol; verdes, azuis e violetas parecem frios, como água, sombra e fim de tarde. A temperatura muda a sensação de um design antes de qualquer pessoa lê-lo: cores quentes vêm para a frente e dão energia, cores frias recuam e acalmam. Usá-la de propósito é um dos jeitos mais rápidos de fazer uma paleta parecer intencional.

A temperatura é relativa

A linha entre quente e frio não é fixa. Os amarelos-esverdeados e os vermelhos-violeta ficam na fronteira, e qualquer cor parece mais quente ao lado de uma mais fria. Um magenta ao lado de um azul-celeste parece quente; o mesmo magenta ao lado do laranja parece frio. É por isso que a temperatura deve ser avaliada na paleta, não amostra por amostra.

As cores também têm temperatura dentro de um mesmo matiz. Um vermelho que puxa para o laranja é mais quente que um vermelho que puxa para o azul, e um azul com um toque de verde é mais quente que um que puxa para o violeta. Os designers chamam essa inclinação de subtom, e é ela que faz dois “vermelhos” brigarem.

Como as cores quentes e frias criam profundidade

As cores quentes tendem a parecer vir para a frente e as frias a recuar. Pintores de paisagem usam isso há séculos: o ar espalha a luz, então as montanhas distantes realmente parecem mais azuladas e claras, e os nossos olhos leem o frio e o claro como distância. Você pode usar o mesmo efeito em design chapado.

A regra prática: coloque as cores frias nas grandes áreas de fundo e guarde as quentes para o que deve chegar primeiro a quem olha. Uma chamada para ação quente em uma página fria se destaca sem precisar ser grande, o que combina bem com a regra 60 30 10.

Neutros quentes e frios

Cinzas, brancos e pretos também têm temperatura, e isso importa mais do que as pessoas imaginam. Um branco quebrado quente lembra papel; um branco frio lembra uma tela ou uma clínica. Um design que mistura um fundo cinza quente com texto cinza frio costuma parecer levemente errado, sem que ninguém consiga dizer por quê.

:root {
  /* Warm neutrals: pair with reds, oranges, golds */
  --paper: #f5efe6;
  --stone: #b8ada0;
  --charcoal-warm: #3d3530;

  /* Cool neutrals: pair with blues, greens, violets */
  --mist: #eef2f6;
  --slate: #a3adb8;
  --charcoal-cool: #2b3240;
}

Como misturar quente e frio em um só gradiente

Gradientes do quente ao frio estão entre os mais marcantes que existem, e o pôr do sol prova isso. Também são os que mais dão errado, porque cores quentes e frias muitas vezes ficam em lados opostos do círculo e uma transição direta entre elas passa pelo cinza. A solução é levar a transição por uma cor que pertence aos dois lados, geralmente rosa, magenta ou violeta.

A proporção também importa aqui. Deixe uma temperatura liderar e a outra aparecer como contraste. Um gradiente quase todo frio com um brilho quente em uma borda parece luz de fim de tarde; uma divisão igual entre quente e frio parece indecisa. Gradientes de pôr do sol traz muitos outros exemplos de quente e frio dividindo o mesmo campo.

Cores quentes e frias no design do dia a dia

• O cardápio de um café: fundo creme quente, texto cor de café expresso e um destaque terracota, para parecer o próprio ambiente em que fica pendurado
• Um app de banco: superfícies em ardósia fria e azul, com um único âmbar quente para alertas que precisam de atenção
• O pôster de um evento noturno: campo violeta frio e profundo com um título laranja quente que salta para a frente
• Um lançamento de skincare: névoa fria e sálvia, realçadas por um único pêssego quente no nome do produto
• Uma promoção esportiva: vermelho e laranja quentes na liderança, um azul-marinho frio só nas letras miúdas

Em cada caso, uma temperatura define o clima e a outra dirige a atenção. Essa combinação também é uma forma suave de contraste de cores complementares, sem o choque completo dos opostos verdadeiros.

Como escolher uma temperatura para a sua marca

1. 1

   Comece pela sensação

   Marcas acolhedoras, animadas e mão na massa costumam puxar para o quente. Marcas precisas, calmas e confiáveis costumam puxar para o frio. Nenhuma é melhor; escolha a que combina com o que você faz.

2. 2

   Escolha uma temperatura líder

   Monte a maior parte da paleta, incluindo os neutros, de um lado só. Isso dá à marca um clima consistente.

3. 3

   Acrescente um destaque do outro lado

   Um único destaque quente em uma marca fria, ou um frio em uma marca quente, dá contraste e um lugar claro para o olhar pousar.

4. 4

   Teste no contexto

   Confira a paleta nas telas e materiais reais em que ela vai viver. As cores mudam de uma tela para outra e de novo na impressão; veja como escolher as cores da marca.