Tint (matiz clareada)

Versao mais clara de uma cor, feita adicionando branco ao matiz puro.

Hard

O que é

Tint e a variacao mais clara de uma cor, criada ao adicionar branco a um matiz puro. Quanto mais branco voce adiciona, mais clara e menos saturada ela fica. E assim que um azul marinho vira azul ceu, ou que um vermelho vira rosa.

Vale conhecer os tres irmaos dessa familia. O branco gera o tint, que e mais claro; o preto gera o shade, mais escuro e profundo; e o cinza gera o tone, mais abafado, sem clarear nem escurecer. Na pratica digital, quase nunca se mistura branco de verdade: o que se faz e ajustar a luminosidade no HSL ou definir a variacao por percentual numa escala.

Na interface, o tint faz um trabalho bem funcional. Ele cria estado de hover e de desabilitado, fundo suave de marca e o fundo de alerta de sucesso ou erro. Tanto que um sistema de design moderno nem define um hex unico: ele define uma escala numerada, de 50 e 100 ate 900, em que cada passo e um tint ou um shade do matiz base.

Em uma frase

No card de sucesso a gente usa um tint claro de verde no fundo, em vez do verde cheio.

A pergunta que ele responde

Como clareio uma cor de marca pra usar em fundo e estado sem perder a identidade?

Quando usar

Faz sentido pra estender uma cor de marca em fundo, estado e hierarquia sem a intensidade do matiz cheio.

Como não usar

O cuidado e nao pegar um tint claro demais pra texto sobre fundo branco, porque ai voce cai abaixo do contraste minimo de leitura.

Na prática

Pense num card de sucesso: em vez de um verde cheio e intenso, o time usa um tint claro de verde no fundo. O sentido de sucesso continua ali, mas sem o peso visual de uma cor saturada.

Não confunda com

Vale separar tint de shade e de tone. O tint adiciona branco e clareia, o shade adiciona preto e escurece, e o tone adiciona cinza e abafa. Sao tres jeitos diferentes de mexer numa mesma cor base, cada um com um efeito proprio.

D

Em inglês

Tint

Pronúncia

tint

Também chamado de

tint, tom claro, matiz com branco

Origem

Teoria classica da cor.

Fonte

Saiba mais

Interaction Design Foundation, artigo sobre tints, shades e tones