Tints, tons e shades: como montar uma escala de cores

Tints, tons e shades são as três formas de mudar uma cor sem mudar o matiz. O tint é a cor misturada com branco, então fica mais clara e suave. O shade é a cor misturada com preto, então fica mais profunda. O tom é a cor misturada com cinza, então fica mais quieta e sóbria. Pense em tints, tons e shades como branco, cinza e preto acrescentados a um matiz. Ponha em ordem uma sequência de tints e shades e você tem uma escala de cores: a ferramenta que transforma uma única cor de marca em algo com que se pode realmente criar.

Tint, tom e shade, lado a lado

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

O que tints, tons e shades fazem num design

Cada direção muda o clima tanto quanto a cor. Tints parecem gentis, jovens e abertos, e por isso as paletas de cores pastel são quase só tints. Shades parecem ricos, sérios e premium, território das paletas de cores escuras. Tons parecem adultos e naturais, a base de quase toda paleta de cores suaves.

Como montar 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 da marca perto do 500. A consistência importa mais que os números: toda cor do seu sistema deve ter os mesmos degraus, para que 200 sempre signifique um fundo claro e 700 sempre signifique texto. Cinco degraus bem escolhidos valem mais que onze que ninguém distingue, e você pode acrescentar os intermediários quando designs reais mostrarem onde fazem falta.

1. 1

   Posicione a cor da marca

   Decida a qual degrau ela pertence. Uma cor média como #7c3aed fica em 500; um azul-marinho de marca bem escuro poderia ficar em 800.

2. 2

   Faça a ponta clara

   Misture em direção ao branco de 400 até 50. O degrau mais claro deve mal ter cor, claro o bastante para ser fundo de página.

3. 3

   Faça a ponta escura

   Misture em direção ao preto de 600 até 900. O degrau mais escuro deve ser escuro o bastante para texto corrido sobre o mais claro.

4. 4

   Uniformize os degraus

   Olhe a fileira de longe. Se dois vizinhos parecem quase idênticos e outro intervalo parece um salto, ajuste a olho.

5. 5

   Desloque um pouco o matiz nas pontas

   O preto puro pode deixar os shades sujos. Muitos designers empurram os degraus escuros alguns graus para o azul ou violeta e os claros para o quente.

6. 6

   Confira os pares que vão se encontrar

   Teste os degraus de texto sobre os degraus de fundo para contraste, usando contraste de cor e acessibilidade como guia.

Faça tints e shades em CSS

Você não precisa mais calcular cada degrau à mão. O color-mix() do CSS mistura duas cores num espaço de cor escolhido, então uma escala inteira pode seguir uma só variável. Misturar em OKLCH deixa os degraus mais uniformes ao olho do que o sRGB puro, ponto tratado em OKLCH explicado. O suporte dos navegadores é amplo; veja color-mix() na MDN para detalhes.

: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 costumam ser só um matiz indo de tint a shade. Como nada cruza o círculo cromático, não há faixa cinza no meio, e o resultado parece luz caindo sobre um único material. Esquemas de cores monocromáticos usam a mesma ideia para paletas inteiras.

Um Mark do Gradiently funciona de modo parecido: uma receita de cores relacionadas com a luz passando por elas. Quando você cria sobre um, as cores perto das palavras escurecem ou clareiam para o texto continuar legível sem uma caixa atrás.