Tints e shades

O que são tints e shades?

Um tint é uma cor misturada com branco, o que a deixa mais clara, e um shade é uma cor misturada com preto, o que a deixa mais escura. Gerá-los em passos regulares a partir de uma cor base dá uma escala consistente, como a que os design systems usam para coisas como blue-100 a blue-900, sem escolher cada valor no olho. Este gerador mistura a cor base com branco e com preto em passos de 5, 10, 20 ou 25 por cento, lista cada resultado do tint mais claro ao shade mais escuro e permite copiá-los em HEX, RGB ou HSL.

Exemplos

Misturando uma cor com branco ou preto para obter os mesmos tints e shades em código:

CSS

/* color-mix() needs Chrome 111+, Firefox 113+, Safari 16.2+ */
--blue-300: color-mix(in srgb, #2563eb 70%, white);
--blue-700: color-mix(in srgb, #2563eb 70%, black);

Sass

$tint: mix(white, #2563eb, 30%);
$shade: mix(black, #2563eb, 30%);

JavaScript

const mix = (a, b, w) => a.map((c, i) => Math.round(c + (b[i] - c) * w));
mix([37, 99, 235], [255, 255, 255], 0.3); // tint 30%
mix([37, 99, 235], [0, 0, 0], 0.3);       // shade 30%

Python

def mix(a, b, w):
    return tuple(round(c + (d - c) * w) for c, d in zip(a, b))

mix((37, 99, 235), (255, 255, 255), 0.3)

Casos de uso

Montar a escala de cores de um design system

Transforme uma única cor de marca em uma rampa completa do claro ao escuro para fundos, bordas, estados de hover e texto, todos claramente relacionados.

Estados de hover e active

Escolha um shade um ou dois passos mais escuro que a cor de um botão para os estados de hover e pressionado, assim as interações ficam consistentes em toda a interface.

Fundos sutis

Use um tint claro de uma cor de destaque para caixas de alerta, linhas selecionadas ou seções destacadas que precisam continuar legíveis atrás do texto.

Gráficos e visualização de dados

Tints sequenciais de um mesmo matiz funcionam bem para heatmaps e gráficos empilhados em que os valores têm uma ordem.

Perguntas frequentes

Qual a diferença entre tint, shade e tone?

Um tint adiciona branco, um shade adiciona preto e um tone adiciona cinza. Esta ferramenta gera tints e shades, que são a base da maioria das escalas de cor de interface.

Como a mistura é calculada?

Cada canal é interpolado linearmente em sRGB entre a cor base e o branco ou o preto, o mesmo que fazem o mix() do Sass e o color-mix(in srgb, ...) do CSS. Um tint de 30% é 70% cor base e 30% branco.

Por que o branco e o preto puros não aparecem?

Misturar a 100% dá branco ou preto liso para qualquer cor base, então eles ficam de fora. A lista vai do tint mais claro ao shade mais escuro, com a cor base no meio.

Por que os shades escuros parecem um pouco apagados?

Misturar com preto reduz a saturação junto com a luminosidade. Se quiser escuros mais vivos, use um shade como ponto de partida e aumente a saturação no Conversor de Cores.

Meus dados são enviados a algum servidor?

Não. Cada cor é calculada no seu navegador com JavaScript puro. Nada do que você informa é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Gradiente CSS Gerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem Simulador de Daltonismo