Sombra de cor (shade)

Variação mais escura de uma cor, feita misturando preto ao matiz puro.

Hard

O que é

Sombra (shade) é a versão escurecida de uma cor, criada ao adicionar preto ao matiz puro. É assim que o vermelho vira bordô, o azul vira marinho e o verde vira verde escuro. Ela é uma das três modificações da teoria da cor, já que o preto faz a sombra, o branco faz a tonalidade (tint) e o cinza faz o tom.

Na interface, a sombra serve à hierarquia, à profundidade e ao estado. No texto, tons mais escuros de um mesmo neutro criam nível, com o mais escuro pro corpo e um pouco mais claro pro secundário, enquanto no botão a sombra marca o hover e o pressionado, dando a sensação de resposta ao toque.

Vale lembrar que o design system moderno não trata cor como valor único, e sim como escala numerada que vai do mais claro ao mais escuro. As sombras são justamente as posições escuras dessa escala, referenciadas por token semântico que liga propósito a valor.

Em uma frase

No hover a gente usa uma shade mais escura da cor da marca, pra a pessoa sentir que o botão respondeu ao toque.

A pergunta que ele responde

Como crio variações mais escuras da cor da marca pra estado de botão e escala do design system?

Quando usar

Ajuda pra criar hierarquia de texto, estado de componente, profundidade de superfície e escalas de cor no design system.

Como não usar

O cuidado é não usar sombra escura sobre fundo escuro sem checar o contraste, que é o erro mais comum de acessibilidade no dark mode.

Na prática

Pense num botão que usa a cor da marca no estado normal e uma sombra mais escura no hover. Com isso, a pessoa sente que o elemento respondeu quando o mouse passou por cima.

Não confunda com

Vale separar sombra (shade) de tonalidade (tint), já que as duas costumam ser confundidas. A sombra escurece a cor com preto, enquanto a tonalidade clareia com branco, mesmo as duas partindo do mesmo matiz. A diferença está só no que você mistura.

D

Em inglês

Shade

Pronúncia

xêid

Também chamado de

shade, sombra de cor, tom escurecido

Origem

Teoria da cor.

Fonte

Saiba mais

Interaction Design Foundation, material sobre tint, tone e shade na teoria da cor