Tints (Mais Claros) de uma Cor

Hex tints: variações mais claras do mesmo matiz

Um tint é uma variação mais clara de uma cor base, obtida misturando o matiz com branco. Tints são o complemento natural dos shades (mistura com preto): juntos eles formam a rampa vertical completa de uma cor num design system. Tints sustentam as partes leves e de baixa energia de uma interface — fundos suaves, superfícies de card, banners informativos, controles desabilitados e acentos pastéis. São eles que fazem uma UI parecer arejada em vez de pesada.

A matemática em HSL

No modelo HSL, gera-se um tint mantendo H e S e aumentando o L. Uma rampa típica partindo de L=50% caminha por 60%, 70%, 80%, 90%, 95% — o inverso de uma rampa de shades. Cuidado: passar de 95% de L deixa a cor quase indistinguível de branco puro, e alta saturação com L alto pode soar "lavada". Muitas paletas reduzem ligeiramente a saturação à medida que L se aproxima do topo da rampa para manter a legibilidade.

OKLCH para tints perceptualmente uniformes

Tints em HSL são fáceis de gerar, mas não são perceptualmente uniformes — saltos iguais em L não parecem saltos iguais de brilho, sobretudo perto do branco. O OKLCH (CSS Color Module 4) resolve isso: é uniforme como Lab e nativo em navegadores modernos. Tailwind v4, Material 3 e Radix Colors geram seus passos claros em OKLCH ou Lab para que cada tint pareça equidistante. Para evergreens, prefira oklch() a hsl().

Onde tints aparecem na UI

• Fundos sutis — fundos de página em L≈95%.
• Superfícies de card — painéis elevados em L≈92%.
• Banners de info / sucesso / alerta — fundo em tint suave em L=85–90% com um shade mais escuro para o texto.
• Controles desabilitados — tints reduzem o contraste e sinalizam "não interativo" sem perder identidade.
• Hover em temas claros — um tint discreto da cor da linha é o hover padrão de tabelas.
• Paletas pastéis e editoriais — pastéis são, por definição, tints de matizes saturados.

Rampas numéricas: Tailwind e Material

No Tailwind, tudo abaixo de 500 na rampa (50, 100, 200, 300, 400) é tint da base. O Material Design usa a mesma convenção com os passos 50, 100, 200, 300, 400. De cinco a nove tints é o ponto prático ideal — com menos de cinco a UI clara fica sem superfícies sutis; com mais de nove, os passos começam a se confundir perto do branco.

Pegadinhas, contraste e impressão

Tints na ponta clara podem falhar no WCAG 4,5:1 quando pareados com qualquer coisa que não seja texto bem escuro — sempre teste contraste. Em visualização de dados, uma sequência de tints próximos parece unificada, mas é difícil de diferenciar; combine tints com um matiz separado ou um padrão. Em impressão offset, tints sofrem com dot gain: um tint de 10% na tela costuma imprimir visivelmente mais escuro porque os pontos de tinta se espalham no papel absorvente. Fundos claros + texto escuro passa fácil em acessibilidade; texto claro sobre tint claro nunca passa.

Perguntas frequentes

Qual a diferença entre tint e shade? Tint é base + branco (mais claro); shade é base + preto (mais escuro). Ambos mantêm o matiz.

Dark mode usa tints? Raramente como fundo — o dark mode é construído principalmente em shades. Tints em dark mode aparecem em texto de acento ou fundos de chip.

Cores pastéis são tints? Sim — pastéis clássicos (azul-bebê, rosa-claro, menta) são tints de matizes saturados.

Quantos tints devo gerar? De cinco a nove; o bastante para cobrir fundos, superfícies, banners e estados desabilitados sem passos invisíveis.