Tints e Shades: Construindo Escalas de Cores para Sistemas de Design

Gere paletas de cores sistemáticas — de 50 a 900 — que alimentam sistemas de design consistentes e acessíveis.

6 min de leitura Cor · CSS · Design 6 seções + FAQ

Todo sistema de design maduro — Tailwind, Material Design, Chakra UI — usa uma escala de cores sistemática em vez de um punhado de cores escolhidas à mão. Essas escalas permitem que designers e desenvolvedores escolham o nível de luminosidade certo para qualquer contexto.

Um tint adiciona branco a uma cor base, tornando-a mais clara. Um shade adiciona preto, tornando-a mais escura. A abordagem matemática usa o modelo HSL para ajustar a luminosidade preservando o matiz e a saturação da cor original.

O que são tints e shades

Na teoria das cores, um tint é uma cor misturada com branco, produzindo uma versão mais clara. Um shade é uma cor misturada com preto, produzindo uma versão mais escura. No design digital, geradores de tints e shades produzem tipicamente uma faixa de valores de luminosidade de quase branco a quase preto.

Ferramenta gratuita Gerador de Tons e Sombras Gere uma escala de cores completa 50–900 a partir de qualquer cor base

Modelo de cor HSL para manipulação

HSL (Matiz, Saturação, Luminosidade) é o modelo preferido para gerar tints e shades porque a luminosidade é um eixo independente. Para criar um tint, aumente L mantendo H e S constantes. Para criar um shade, diminua L.

Construindo uma escala de 9 etapas (100-900)

A escala padrão do sistema de design vai de 50 (quase branco) a 900 (quase preto), com a cor base ancorada em 500. As etapas 100-400 são tints com luminosidade crescente. As etapas 600-900 são shades com luminosidade decrescente.

Ferramenta gratuita Gerador de Paletas de Cores Gere paletas harmoniosas a partir de qualquer cor base

Considerações de acessibilidade

Ao construir uma escala de cores, verifique as taxas de contraste WCAG em cada nível que planeja usar para texto. A etapa 700 em fundo branco tipicamente alcança 4.5:1 (conformidade AA). A etapa 900 alcança 7:1+ (AAA).

Paletas Tailwind e Material Design

Tailwind CSS usa uma escala 50-900 para todas as suas cores integradas. Material Design 3 usa uma abordagem diferente, gerando um esquema de cores completo a partir de uma única "cor semente" usando o espaço de cor HCT.

Propriedades personalizadas CSS

Exporte sua escala de cores como propriedades personalizadas CSS. Defina-as no nível :root. Nomeie-as semanticamente: --color-blue-500, --color-blue-600.

Ferramenta gratuita Verificador de Contraste de Cores Verifique as relações de contraste WCAG entre duas cores

Perguntas frequentes

Qual é a diferença entre um tint e um shade? +
Um tint é uma cor misturada com branco (mais clara). Um shade é uma cor misturada com preto (mais escura). Em escalas de cores digitais, ambos são gerados ajustando a luminosidade em HSL.
Por que usar HSL em vez de RGB para gerar tints/shades? +
RGB não tem um eixo de luminosidade dedicado. O parâmetro de Luminosidade do HSL controla diretamente o brilho sem afetar o matiz.
Quantas etapas deve ter uma escala de cores de sistema de design? +
O padrão da indústria é 9-11 etapas (50, 100-900). Isso fornece granularidade suficiente para texto, fundos, bordas e estados interativos.
O que é a cor base em uma escala de cores? +
A cor base é tipicamente colocada na etapa 500. É a cor como originalmente definida — nem clareada nem escurecida.
Como garantir acessibilidade na minha escala de cores? +
Verifique as taxas de contraste WCAG entre as etapas da sua escala e os fundos em que serão usadas. Cores de texto (tipicamente etapa 700+) devem atingir pelo menos 4.5:1.
Posso usar OKLCH em vez de HSL para escalas de cores? +
Sim, e OKLCH produz etapas perceptivamente mais uniformes. OKLCH agora é suportado em CSS.
Como o Tailwind CSS gera sua paleta de cores? +
As cores integradas do Tailwind são criadas à mão pela equipe Tailwind. Para cores Tailwind personalizadas, você pode usar um gerador de tints/shades.