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

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.

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

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 explora essas associações e seus limites. A temperatura também interage com a intensidade: uma paleta fria levada à saturação 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.

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

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 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 mostra o método completo.

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.

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.