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

[Canonical HTML page](https://gradiently.design/pt-br/guide/warm-and-cool-colors)

Toda cor tem uma temperatura, incluindo os seus cinzas e brancos. Aprenda a lê-la e você consegue deixar um design mais próximo, mais calmo ou mais vivo sem mudar um único matiz.

## The short version

- Cores quentes e frias são as duas metades do círculo cromático: vermelhos, laranjas e amarelos parecem quentes, enquanto verdes, azuis e violetas parecem frios.
- A temperatura é relativa, então um violeta parece quente ao lado do azul e frio ao lado do laranja.
- Cores quentes tendem a parecer mais próximas e enérgicas, enquanto cores frias tendem a recuar e acalmar, e é por isso que as montanhas distantes das paisagens parecem azuis.
- Cinzas e brancos também têm temperatura, e misturar neutros quentes e frios sem querer é um motivo comum para um design parecer um pouco errado.
- Um gradiente do quente ao frio fica limpo quando passa por uma vizinha em comum, como rosa ou violeta, em vez de passar pelo cinza.

**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.

- Vermelho quente: #d7263d
- Laranja quente: #f46036
- Amarelo quente: #f7b32b
- Verde frio: #2e9e6f
- Azul frio: #1b7fbd
- Violeta frio: #5b3cc4

Três cores quentes e três frias de lados opostos do círculo. A divisão fica mais ou menos entre o amarelo-esverdeado e o vermelho-violeta.

## 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.

- Magenta ao lado do azul: quente: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)`
- Magenta ao lado do laranja: frio: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)`

O mesmo magenta à direita nos dois. A temperatura dele muda com a vizinha.

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.

| Qualidade | Cores quentes | Cores frias |
| --- | --- | --- |
| Espaço | Vêm para a frente, parecem próximas | Recuam, parecem distantes |
| Energia | Ativas, urgentes, sociais | Calmas, estáveis, focadas |
| Melhor para | Botões, preços, títulos, comida | Fundos, áreas grandes, dados, saúde |
| Em grande quantidade | Podem parecer barulhentas ou abafadas | Podem parecer frias ou distantes |
| Na luz | Kelvin baixo, como uma lâmpada de 2700 K | Kelvin alto, como a luz de um dia nublado |

Tendências, não leis. Saturação e luminosidade podem inverter a temperatura: um pêssego claro recua mais que um azul elétrico.

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](https://gradiently.design/pt-br/guide/60-30-10-rule).

## 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ê.

- Papel quente: #f5efe6
- Pedra quente: #b8ada0
- Carvão quente: #3d3530
- Névoa fria: #eef2f6
- Ardósia fria: #a3adb8
- Carvão frio: #2b3240

Neutros quentes puxam para o marrom e o creme, os frios para o azul. Escolha uma família para o design inteiro.

```css
: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;
}
```

Manter os neutros em conjuntos quentes e frios com nome facilita perceber misturas acidentais na revisão de código.

## 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.

- Laranja para azul, direto: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)`
- Laranja para azul passando pelo rosa: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)`
- Crepúsculo: frio em cima, quente embaixo: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)`
- Amarelo para verde passando pelo lima: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)`

A transição direta afunda em um meio apagado. As outras passam por uma vizinha em comum, então todo ponto do caminho é uma cor de verdade. [Gradientes lamacentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica a geometria.

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](https://gradiently.design/pt-br/guide/sunset-gradient) 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](https://gradiently.design/pt-br/guide/complementary-colors), sem o choque completo dos opostos verdadeiros.

## Como escolher uma temperatura para a sua marca

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. **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. **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. **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](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors).

## FAQ

### O que são cores quentes e frias?

Cores quentes são vermelhos, laranjas e amarelos; cores frias são verdes, azuis e violetas. As cores de fronteira, amarelo-esverdeado e vermelho-violeta, podem ser lidas dos dois jeitos, dependendo das vizinhas.

### Roxo é uma cor quente ou fria?

Depende da inclinação e das vizinhas. Roxos avermelhados e magentas parecem quentes ao lado do azul, enquanto os azul-violeta parecem frios, e qualquer roxo parece frio ao lado do laranja.

### As cores quentes realmente vêm para a frente?

Elas tendem a parecer mais próximas, principalmente quando saturadas, enquanto cores frias e claras tendem a recuar. Luminosidade e saturação podem anular o efeito.

### Dá para misturar cores quentes e frias em um mesmo design?

Dá. Deixe uma temperatura liderar, use a outra como destaque e, nos gradientes, faça a transição por uma vizinha em comum, como rosa ou violeta, para evitar um meio cinza.