# Cores quentes e frias: usar a temperatura com intenção

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

Todas as cores têm temperatura, incluindo os teus cinzentos e brancos. Aprende a lê-la e podes fazer um design parecer mais próximo, mais calmo ou mais luminoso sem mudar um único tom.

## The short version

- As cores quentes e frias são as duas metades do círculo cromático: os vermelhos, laranjas e amarelos parecem quentes, e os verdes, azuis e violetas parecem frios.
- A temperatura é relativa, por isso um violeta parece quente ao lado do azul e frio ao lado do laranja.
- As cores quentes tendem a parecer mais próximas e enérgicas, e as frias tendem a recuar e a acalmar, e é por isso que as colinas distantes nas paisagens parecem azuis.
- Os cinzentos e os brancos também têm temperatura, e misturar neutros quentes e frios sem querer é uma razão comum para um design parecer ligeiramente errado.
- Um gradiente do quente para o frio mantém-se limpo quando passa por um vizinho partilhado, como o rosa ou o violeta, em vez de passar pelo cinzento.

As **cores quentes e frias** são as duas metades do círculo cromático. Os vermelhos, laranjas e amarelos parecem quentes, como o fogo e a luz do sol; os verdes, azuis e violetas parecem frios, como a água, a sombra e o fim do dia. A temperatura muda a sensação de um design antes de alguém o ler: as cores quentes avançam e dão energia, as frias recuam e acalmam. Usá-la com intenção é uma das formas mais rápidas de fazer uma paleta parecer pensada.

- 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 passa mais ou menos entre o verde amarelado e o vermelho violeta.

## A temperatura é relativa

A fronteira entre quente e frio não é fixa. Os verdes amarelados e os vermelhos violeta ficam no limite, e qualquer cor parece mais quente ao lado de uma mais fria. Um magenta ao lado de um azul céu lê-se como quente; o mesmo magenta ao lado do laranja lê-se como frio. É por isso que deves avaliar a temperatura na paleta e não amostra a 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 sua temperatura muda com o vizinho.

As cores também têm temperatura *dentro* de um tom. Um vermelho que tende para o laranja é mais quente do que um vermelho que tende para o azul, e um azul com um toque de verde é mais quente do que um que tende para o violeta. Os designers chamam subtom a esta tendência, e é ela que faz dois “vermelhos” chocarem.

## Como as cores quentes e frias criam profundidade

As cores quentes tendem a parecer avançar e as frias a recuar. Os pintores de paisagens usam isto há séculos: o ar dispersa a luz, por isso as colinas distantes parecem mesmo mais azuis e mais pálidas, e os nossos olhos leem o frio e o pálido como longe. Podes usar o mesmo efeito no design plano.

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

Tendências, não leis. A saturação e a luminosidade podem inverter a temperatura: um pêssego pálido recua mais do que um azul elétrico.

A regra prática: põe as cores frias nas grandes áreas de fundo e guarda as quentes para o que deve chegar primeiro a quem vê. Um apelo à ação quente numa página fria destaca-se sem precisar de ser grande, o que encaixa bem na [regra 60-30-10](https://gradiently.design/pt-pt/guide/60-30-10-rule).

## Neutros quentes e frios

Os cinzentos, brancos e pretos também têm temperatura, e isso importa mais do que as pessoas pensam. Um branco-sujo quente parece papel; um branco frio parece um ecrã ou uma clínica. Um design que mistura um fundo cinzento quente com texto cinzento frio parece muitas vezes ligeiramente errado sem que ninguém saiba dizer porquê.

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

Os neutros quentes tendem para o castanho e o creme, os frios para o azul. Escolhe uma família para um 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 torna fácil detetar misturas acidentais na revisão do código.

## Juntar quente e frio num só gradiente

Os gradientes do quente para o frio estão entre os mais impressionantes que há, e os pores do sol provam-no. São também os que mais facilmente correm mal, porque as cores quentes e frias ficam muitas vezes opostas no círculo e uma mistura direta entre elas passa pelo cinzento. A solução é encaminhar a mistura por uma cor que pertença aos dois lados, normalmente rosa, magenta ou violeta.

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

A mistura direta cai num meio baço. As outras passam por um vizinho partilhado, por isso cada ponto do caminho é uma cor verdadeira. [Gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica a geometria.

A proporção também conta aqui. Deixa uma temperatura liderar e a outra aparecer como contraste. Um gradiente sobretudo frio com um brilho quente numa das margens 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-pt/guide/sunset-gradient) tem muitos mais exemplos de quente e frio a partilhar o mesmo campo.

## Cores quentes e frias no design do dia a dia

- **O quadro do menu de um café:** fundo creme quente, texto cor de café expresso e um só acento terracota, para parecer a sala onde está pendurado
- **Uma aplicação bancária:** superfícies em ardósia fria e azul, com um só âmbar quente para alertas que pedem atenção
- **Um cartaz de evento noturno:** campo violeta frio e profundo com um título laranja quente que salta para a frente
- **Um lançamento de cuidados de pele:** névoa fria e salva, animadas por um único pêssego quente no nome do produto
- **Uma promoção desportiva:** vermelho e laranja quentes a liderar, um azul marinho frio só para a letra pequena

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-pt/guide/complementary-colors), sem o choque total dos opostos verdadeiros.

## Escolher uma temperatura para a tua marca

1. **Parte da sensação** As marcas acolhedoras, animadas e práticas costumam tender para o quente. As marcas precisas, calmas e de confiança costumam tender para o frio. Nenhuma é melhor; escolhe a que corresponde ao que fazes.
2. **Escolhe uma temperatura principal** Constrói a maior parte da paleta, incluindo os neutros, de um só lado. Isso dá à marca um clima coerente.
3. **Junta um acento do outro lado** Um único acento quente numa marca fria, ou um frio numa marca quente, dá contraste e um sítio claro onde o olhar pousa.
4. **Testa no contexto** Verifica a paleta nos ecrãs e materiais reais onde vai viver. As cores mudam entre ecrãs e outra vez na impressão; vê [como escolher as cores da marca](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors).

## FAQ

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

As cores quentes são os vermelhos, laranjas e amarelos; as frias são os verdes, azuis e violetas. As cores da fronteira, o verde amarelado e o vermelho violeta, podem ler-se de uma forma ou de outra consoante os vizinhos.

### O roxo é quente ou frio?

Depende da sua tendência e dos vizinhos. Os roxos avermelhados e os magentas parecem quentes ao lado do azul, enquanto os azuis violeta parecem frios, e qualquer roxo parece frio ao lado do laranja.

### As cores quentes avançam mesmo?

Tendem a parecer mais próximas, sobretudo quando saturadas, enquanto as cores frias e pálidas tendem a recuar. A luminosidade e a saturação podem anular o efeito.

### Posso juntar cores quentes e frias no mesmo design?

Sim. Deixa uma temperatura liderar, usa a outra como acento e, nos gradientes, mistura através de um vizinho partilhado como o rosa ou o violeta para evitar um meio cinzento.