# Temperatura de cor em design: luz quente, fria e neutra

[Canonical HTML page](https://gradiently.design/pt-pt/guide/color-temperature)

Toda a cor tende para o quente ou para o frio, até os cinzentos. Eis o que significa a escala Kelvin, porque corre ao contrário do modo como falamos de calor e como usar a temperatura para definir o ambiente de um design.

## The short version

- A temperatura de cor descreve se a luz ou a cor tende para o laranja e o vermelho, que parece quente, ou para o azul, que parece frio.
- As fontes de luz medem-se em kelvin: a luz de velas fica em torno de 1900 K, as lâmpadas domésticas em torno de 2700 K e o branco do padrão sRGB, o D65, em torno de 6500 K.
- Valores de kelvin mais altos parecem mais azuis, por isso, na luz, um número de temperatura mais alto significa uma cor de aspeto mais frio.
- Os neutros também têm temperatura: os cinzentos quentes tendem para o castanho ou o bege e os cinzentos frios tendem para o azul.
- Muitas imagens convincentes juntam luz quente com sombras frias, ou o contrário, porque esse contraste lê-se como profundidade natural.

A **temperatura de cor** é quão quente ou fria parece uma luz ou uma cor. Quente quer dizer a tender para o laranja de vela e o vermelho; frio quer dizer a tender para o azul do dia; neutro fica entre os dois. Na luz mede-se em kelvin, onde uma vela ronda 1900 K e um céu nublado cerca de 6500 K. No design usa-se para definir o ambiente: as paletas quentes parecem próximas e confortáveis, as frias parecem calmas e espaçosas, e misturar as duas dá profundidade a uma imagem.

## A escala kelvin e porque parece ao contrário

O valor em kelvin vem da física: é a temperatura que um objeto ideal incandescente teria de atingir para emitir luz dessa cor. Uma barra de metal aquecida devagar brilha a vermelho, depois laranja, depois branco amarelado e, a temperaturas extremas, branco azulado. Assim, um número mais alto significa uma luz mais azul, a que os designers chamam mais fria. O vocabulário corre ao contrário da física, e isso confunde toda a gente ao início.

| Fonte de luz | Temperatura aproximada | Como se vê |
| --- | --- | --- |
| Chama de vela | 1900 K | Âmbar profundo |
| Lâmpada doméstica de branco quente | 2700 K | Branco alaranjado suave |
| Lâmpada de halogéneo | 3000 K | Branco quente |
| Luz de escritório de branco frio | 4000 K | Branco neutro |
| Sol do meio-dia | 5500 K | Branco limpo |
| Céu nublado, ponto branco sRGB D65 | 6500 K | Branco ligeiramente frio |
| Sombra aberta sob um céu azul | 10 000 K e acima | Nitidamente azul |

Valores típicos. As fontes reais variam, e as lâmpadas vendem-se em faixas como 2700 K e 4000 K.

Aproximadamente de 1900 K a 10 000 K: `linear-gradient(90deg, #ff8912 0%, #ffa757 18%, #ffb46b 30%, #ffd1a3 48%, #ffecdf 62%, #fff9fb 74%, #e3e9ff 87%, #c9d9ff 100%)`

Cores aproximadas no ecrã da luz, da vela à sombra azul. Os teus olhos adaptam-se à luz em que estão, e é por isso que uma sala de 2700 K parece branca depois de lá estares algum tempo.

Essa adaptação importa nos ecrãs. O padrão sRGB, que a maior parte da cor na web e em aplicações assume, usa o D65, cerca de 6500 K, como branco. Funcionalidades como os modos noturno deslocam o branco de um ecrã para mais quente, por isso as cores que escolheste vão parecer mais quentes a quem lê à noite. Desenha para o padrão e aceita o desvio.

## Cores quentes, frias e neutras

Fora da iluminação, a temperatura tem a ver com o lado do círculo para onde a cor tende. Vermelhos, laranjas e amarelos leem-se quentes; azuis, verdes-azulados e violetas azulados leem-se frios. Verdes e roxos ficam no meio e podem ir para qualquer lado: uma oliva é quente, uma menta é fria. [Cores quentes e frias](https://gradiently.design/pt-pt/guide/warm-and-cool-colors) trata do círculo em detalhe; o útil aqui é que a temperatura também se aplica dentro de um mesmo tom. Há azuis quentes e vermelhos frios.

- Vermelho quente, tijolo: #c2372b
- Vermelho frio, framboesa: #c2185b
- Azul quente, ganga: #2b5d8a
- Azul frio, cobalto: #2563eb
- Verde quente, oliva: #7a8b3a
- Verde frio, menta: #3fbf9f

Três tons, cada um numa versão quente e numa fria. Os vermelhos quentes tendem para o laranja, os frios para o azul; o mesmo vale para todos os tons.

A temperatura faz grande parte do trabalho emocional de uma paleta, muitas vezes mais do que o próprio tom. Os esquemas quentes parecem próximos, sociáveis e enérgicos; os frios parecem calmos, espaçosos e controlados. [Psicologia das cores](https://gradiently.design/pt-pt/guide/color-psychology) explora essas associações e os seus limites. A temperatura também interage com a intensidade: uma paleta fria levada à [saturação](https://gradiently.design/pt-pt/guide/color-saturation) máxima deixa de parecer calma, e uma quente reduzida ao mínimo começa a parecer vintage e não animada.

## Os neutros também têm temperatura

O cinzento puro é raro em bom design. A maioria dos cinzentos bem usados tende ligeiramente para o quente, para pedra e castanho-acinzentado, ou ligeiramente para o frio, para ardósia e aço. Misturar as duas famílias num só layout costuma parecer enlameado sem ninguém saber porquê. Escolhe uma família e usa-a em fundos, bordas e texto secundário do princípio ao fim.

- Cinzentos quentes: papel a terra: `linear-gradient(90deg, #f6f3ee 0%, #e4ded4 25%, #bdb4a7 50%, #7d7468 75%, #2f2a25 100%)`
- Cinzentos frios: geada a ardósia: `linear-gradient(90deg, #f3f5f8 0%, #dde2e9 25%, #aab3c0 50%, #646e7d 75%, #1e242d 100%)`
- Cinzentos neutros puros: `linear-gradient(90deg, #f5f5f5 0%, #e0e0e0 25%, #b3b3b3 50%, #707070 75%, #262626 100%)`

Três escalas de cinzentos. Põe um cinzento quente ao lado de um frio e a diferença é óbvia; sozinhos, ambos se leem apenas como cinzento.

```css
:root {
  /* A warm neutral ramp: pick one family and keep it */
  --grey-50: #f6f3ee;
  --grey-200: #e4ded4;
  --grey-400: #bdb4a7;
  --grey-600: #7d7468;
  --grey-900: #2f2a25;
}
```

Uma escala de cinzentos quentes como tokens. Troca pelos valores frios para um ar mais nítido e técnico.

Os neutros quentes servem marcas de comida, hotelaria, bem-estar e editoriais. Os neutros frios servem software, finanças e tudo o que deva parecer preciso. [Paletas de cores neutras](https://gradiently.design/pt-pt/guide/neutral-color-palettes) tem mais conjuntos.

## Luz quente, sombra fria

Os pintores notaram há muito que a luz e a sombra diferem na temperatura, e não só no brilho. As superfícies ao sol ficam quentes enquanto as sombras ganham azul do céu. Recria isso num gradiente ou numa ilustração e parece de imediato mais real do que uma versão clara e escura de um só tom. Funciona também ao contrário: luar frio com sombras quentes de candeeiro.

Nos fundos, esta é a diferença entre um gradiente que parece iluminado e um que parece uma amostra de cor. Põe a luz quente onde o olhar deve ir primeiro, deixa os tons frios juntarem-se nas bordas e mantém o texto sobre a mais calma das duas. [Fundo de gradiente](https://gradiently.design/pt-pt/guide/gradient-background) percorre todo o método.

- Luz de pôr do sol, sombra azul: `radial-gradient(circle at 25% 25%, #ffd29a 0%, #e98a5a 35%, #3b3f6b 80%, #1a1c33 100%)`
- Luar, escuro quente: `radial-gradient(circle at 75% 20%, #cfe3ff 0%, #6d86b8 40%, #3d2a2a 85%)`
- Hora dourada ao anoitecer: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)`

Gradientes que juntam temperaturas. Compara-os com um só tom a ir do claro ao escuro, que parece plano ao lado deles.

Uma capa ao estilo de revista intitulada Noites longas, edição de verão

Uma capa de verão. A temperatura define a estação antes de alguém ler as palavras.

Uma capa ao estilo de revista intitulada Manhãs tranquilas, edição de inverno

Uma capa de inverno com o mesmo layout. Deixa a luz quente, se a houver, bem longe das palavras.

## Temperatura de cor nas fotografias

O equilíbrio de brancos é a estimativa que a câmara faz da temperatura da luz. Uma fotografia tirada sob lâmpadas quentes com equilíbrio de brancos de luz do dia fica alaranjada; uma tirada à sombra fica azulada. Quando as fotografias ficam ao lado das cores da marca, ajusta a temperatura delas à paleta. Uma marca quente com fotografias frias e azuis parece desligada. Tingir as fotografias com as próprias cores da paleta é outra solução: vê [fotografias duotone](https://gradiently.design/pt-pt/guide/photo-duotone-in-mark-colours).

### Evita

- Cinzentos quentes e frios misturados no mesmo layout
- Fotografias frias e azuis numa marca quente
- Um só tom do claro ao escuro para dar profundidade
- Avaliar a cor sob um candeeiro de secretária quente

### Faz

- Uma só família de neutros, usada em todo o lado
- Fotografias corrigidas para o calor da paleta
- Luz quente com sombra fria, ou o contrário
- Verificar a cor à luz do dia ou num ecrã calibrado

Os Marks do Gradiently levam a luz como parte da sua receita, por isso leem-se como uma superfície iluminada e não como uma amostra plana, a cada tamanho em que desenhas.

## FAQ

### O que é a temperatura de cor em design?

Descreve se uma cor ou luz tende para o quente, para o laranja e o vermelho, ou para o frio, para o azul. Os designers usam-na para definir o ambiente e criar profundidade.

### Um kelvin mais alto é mais quente ou mais frio?

Mais frio na aparência. Valores de kelvin mais altos produzem luz mais azul, por isso 6500 K parece mais frio do que 2700 K.

### Que temperatura de cor tem a luz do dia?

O sol do meio-dia ronda 5500 K e um céu nublado cerca de 6500 K. O branco do padrão sRGB, o D65, é de cerca de 6500 K.

### Qual é a diferença entre cinzento quente e cinzento frio?

O cinzento quente tende ligeiramente para o castanho ou o bege; o cinzento frio tende ligeiramente para o azul. Escolhe uma família e usa-a com coerência.