Tints, tones e shades: como construir uma escala de cores

Tints, tones e shades são as três formas de mudar uma cor sem mudar o seu matiz. Um tint é a cor misturada com branco, por isso fica mais clara e suave. Um shade é a cor misturada com preto, por isso fica mais profunda. Um tone é a cor misturada com cinzento, por isso fica mais calma e apagada. Pensa em tints, tones e shades como branco, cinzento e preto juntados a um só matiz. Põe uma sequência de tints e shades por ordem e tens uma escala de cores: a ferramenta que transforma uma só cor de marca em algo com que podes mesmo desenhar.

Tint, tone e shade, lado a lado

A maneira mais fácil de ver a diferença é partir de uma cor e empurrá-la de três formas. Aqui a base é um violeta, #7c3aed, misturado em passos de 20 por cento.

O que tints, tones e shades fazem a um design

Cada direção muda o ambiente tanto como a cor. Os tints leem-se como delicados, jovens e abertos, e é por isso que as paletas de cores pastel são sobretudo tints. Os shades leem-se como ricos, sérios e premium, o território das paletas de cores escuras. Os tones leem-se como adultos e naturais, a base de quase todas as paletas de cores apagadas.

Como construir uma escala de cores a partir de um hex

A maioria dos sistemas de design numera a escala de 50 ou 100 (mais claro) a 900 (mais escuro), com a cor de marca algures perto de 500. A coerência importa mais do que os números: toda a cor do teu sistema deve ter os mesmos passos, para que 200 signifique sempre um fundo claro e 700 signifique sempre texto. Cinco passos bem escolhidos valem mais do que onze que ninguém distingue, e podes juntar os passos intermédios quando os designs reais mostrarem onde fazem falta.

1. 1

   Coloca a tua cor de marca

   Decide a que passo pertence. Uma cor média como #7c3aed fica em 500; um azul-marinho de marca muito escuro pode ficar em 800.

2. 2

   Faz a ponta clara

   Mistura para o branco de 400 até 50. O passo mais claro deve ter quase nenhuma cor, claro o bastante para um fundo de página.

3. 3

   Faz a ponta escura

   Mistura para o preto de 600 até 900. O passo mais escuro deve ser escuro o bastante para texto corrido sobre o mais claro.

4. 4

   Uniformiza os passos

   Olha para a fila à distância. Se dois vizinhos parecem quase iguais e outro intervalo parece um salto, ajusta-os a olho.

5. 5

   Desloca ligeiramente o matiz nas pontas

   O preto puro pode fazer os shades parecerem sujos. Muitos designers empurram os passos escuros uns graus para o azul ou violeta e os claros para o quente.

6. 6

   Verifica os pares que vão encontrar-se

   Testa os passos de texto sobre os passos de fundo quanto ao contraste, usando contraste de cor e acessibilidade como guia.

Fazer tints e shades em CSS

Já não precisas de calcular cada passo à mão. O color-mix() do CSS mistura duas cores num espaço de cor escolhido, por isso uma escala inteira pode seguir uma só variável. Misturar em OKLCH mantém os passos mais uniformes à vista do que o sRGB simples, um ponto tratado em OKLCH explicado. O suporte dos navegadores é amplo; vê color-mix() na MDN para os pormenores.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Tints e shades em gradientes

Os gradientes mais limpos são muitas vezes só um matiz a passar de tint para shade. Como nada cruza o círculo cromático, não há faixa cinzenta no meio, e o resultado lê-se como luz a cair num só material. Os esquemas de cores monocromáticos usam a mesma ideia para paletas inteiras.

Um Mark do Gradiently funciona de forma parecida: uma receita de cores relacionadas com luz a atravessá-la. Quando desenhas sobre um, as cores junto às tuas palavras escurecem ou clareiam para o texto se manter legível sem uma caixa por trás.