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

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

Toda cor puxa para o quente ou para o frio, até os cinzas. Veja o que a escala Kelvin significa, por que ela funciona ao contrário de como falamos de calor e como usar a temperatura para definir o clima de um design.

## The short version

- A temperatura de cor descreve se uma luz ou cor puxa para o laranja e o vermelho, que parecem quentes, ou para o azul, que parece frio.
- Fontes de luz são medidas em kelvin: a luz de vela fica em torno de 1.900 K, as lâmpadas domésticas em torno de 2.700 K e o branco padrão do sRGB, o D65, em torno de 6.500 K.
- Valores mais altos em kelvin parecem mais azuis, então, na luz, um número de temperatura mais alto significa uma cor que parece mais fria.
- Os neutros também têm temperatura: cinzas quentes puxam para o marrom ou o bege, e cinzas frios puxam para o azul.
- Muitas imagens convincentes combinam luz quente com sombras frias, ou o contrário, porque esse contraste é lido como profundidade natural.

**Temperatura de cor** é o quanto uma luz ou uma cor parece quente ou fria. Quente significa puxar para o laranja da vela e o vermelho; frio significa puxar para o azul da luz do dia; o neutro fica no meio. Na luz, ela é medida em kelvin: uma vela fica em torno de 1.900 K e um céu nublado em torno de 6.500 K. No design, você a usa para definir o clima: paletas quentes parecem próximas e aconchegantes, as frias parecem calmas e espaçosas, e misturar as duas dá profundidade à imagem.

## A escala Kelvin, e por que ela parece invertida

O número em kelvin vem da física: é a temperatura que um objeto incandescente ideal precisaria atingir para emitir luz daquela cor. Uma barra de metal aquecida aos poucos brilha vermelha, depois laranja, depois branco-amarelada e, em temperaturas extremas, branco-azulada. Então um número mais alto significa uma luz mais azul, que os designers chamam de mais fria. O vocabulário vai no sentido oposto da física, e isso confunde todo mundo no começo.

| Fonte de luz | Temperatura aproximada | Como parece |
| --- | --- | --- |
| Chama de vela | 1.900 K | Âmbar profundo |
| Lâmpada doméstica branco quente | 2.700 K | Branco alaranjado suave |
| Lâmpada halógena | 3.000 K | Branco quente |
| Luz de escritório branco frio | 4.000 K | Branco neutro |
| Sol do meio-dia | 5.500 K | Branco limpo |
| Céu nublado, ponto branco D65 do sRGB | 6.500 K | Branco levemente frio |
| Sombra aberta sob céu azul | 10.000 K ou mais | Claramente azul |

Valores típicos. Fontes reais variam, e as lâmpadas são vendidas em faixas como 2.700 K e 4.000 K.

Mais ou menos de 1.900 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 na tela da luz, da vela à sombra azul. Seus olhos se adaptam a qualquer luz em que você esteja, e é por isso que um cômodo a 2.700 K parece branco depois de um tempo lá dentro.

Essa adaptação importa nas telas. O padrão sRGB, que a maioria das cores da web e dos apps pressupõe, usa o D65, cerca de 6.500 K, como branco. Recursos como o modo noturno deixam o branco da tela mais quente, então as cores que você escolheu vão parecer mais quentes para quem lê à noite. Projete para o padrão e aceite essa variação.

## Cores quentes, frias e neutras

Fora da iluminação, temperatura é sobre para qual lado do círculo uma cor puxa. Vermelhos, laranjas e amarelos parecem quentes; azuis, verde-azulados e azul-violetas parecem frios. Verdes e roxos ficam no meio e podem ir para os dois lados: um oliva é quente, um verde-menta é frio. [Cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors) cobre o círculo em detalhes; o que importa aqui é que a temperatura também existe dentro de um mesmo matiz. Existem azuis quentes e vermelhos frios.

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

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

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

## Os neutros também têm temperatura

Cinza puro é raro no bom design. A maioria dos cinzas bem usados puxa levemente para o quente, rumo à pedra e ao fendi, ou levemente para o frio, rumo à ardósia e ao aço. Misturar as duas famílias num mesmo layout costuma deixar tudo lamacento sem que ninguém saiba por quê. Escolha uma família e use em fundos, bordas e textos secundários do começo ao fim.

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

Três escalas de cinza. Coloque um cinza quente ao lado de um frio e a diferença fica óbvia; sozinhos, os dois simplesmente parecem cinza.

```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 cinza quente como tokens. Troque pelos valores frios para um ar mais limpo e técnico.

Neutros quentes combinam com marcas de comida, hospitalidade, bem-estar e editoriais. Neutros frios combinam com software, finanças e tudo o que deve parecer preciso. [Paletas de cores neutras](https://gradiently.design/pt-br/guide/neutral-color-palettes) traz mais conjuntos.

## Luz quente, sombra fria

Pintores perceberam há muito tempo que luz e sombra diferem em temperatura, não só em brilho. Superfícies iluminadas pelo sol ficam quentes, enquanto as sombras pegam o azul do céu. Recrie isso num gradiente ou numa ilustração e o resultado imediatamente parece mais real do que uma versão clara e escura de um único matiz. Funciona ao contrário também: luar frio com sombras quentes de luz de abajur.

Nos fundos, essa é a diferença entre um gradiente que parece iluminado e um que parece uma amostra de cor. Coloque a luz quente onde o olho deve ir primeiro, deixe os tons frios se juntarem nas bordas e mantenha o texto sobre a mais calma das duas áreas. [Fundo em gradiente](https://gradiently.design/pt-br/guide/gradient-background) mostra o método completo.

- 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%)`
- Da hora dourada ao anoitecer: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)`

Gradientes que combinam temperaturas. Compare com um único matiz indo do claro ao escuro, que parece chapado ao lado deles.

Uma capa estilo revista com o título Noites longas, edição de verão

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

Uma capa estilo revista com o título Manhãs tranquilas, edição de inverno

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

## Temperatura de cor nas fotos

O balanço de branco é o palpite da câmera sobre a temperatura da luz. Uma foto tirada sob lâmpadas quentes com balanço de branco de luz do dia fica laranja; uma tirada na sombra fica azul. Quando fotos ficam ao lado das cores da marca, ajuste a temperatura delas à paleta. Uma marca quente com fotos frias e azuladas parece desconexa. Tingir as fotos com as próprias cores da paleta é outra solução: veja [fotos em duotone](https://gradiently.design/pt-br/guide/photo-duotone-in-mark-colours).

### Evite

- Cinzas quentes e frios misturados no mesmo layout
- Fotos frias e azuladas numa marca quente
- Um único matiz do claro ao escuro para dar profundidade
- Avaliar cores sob um abajur de luz quente

### Faça

- Uma família de neutros, usada em tudo
- Fotos corrigidas para o calor da paleta
- Luz quente com sombra fria, ou o contrário
- Conferir as cores à luz do dia ou numa tela calibrada

Os Marks do Gradiently trazem a luz como parte da receita, então parecem uma superfície iluminada e não uma amostra chapada, em qualquer tamanho em que você criar.

## FAQ

### O que é temperatura de cor no design?

Ela descreve se uma cor ou luz puxa para o quente, rumo ao laranja e ao vermelho, ou para o frio, rumo ao azul. Designers a usam para definir o clima e criar profundidade.

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

Parece mais frio. Valores mais altos em kelvin produzem uma luz mais azul, então 6.500 K parece mais frio do que 2.700 K.

### Qual é a temperatura de cor da luz do dia?

O sol do meio-dia fica em torno de 5.500 K e um céu nublado em torno de 6.500 K. O branco padrão do sRGB, o D65, tem cerca de 6.500 K.

### Qual a diferença entre cinza quente e cinza frio?

O cinza quente puxa levemente para o marrom ou o bege; o cinza frio puxa levemente para o azul. Escolha uma família e use de forma consistente.