Como usar as variáveis CSS exportadas?

Clique em "Exportar CSS" para copiar os 19 cores como propriedades CSS personalizadas. Cole-as no bloco :root e use-as com var(--color-tint-30).

Gerador de Tons e Sombras

Gere uma escala completa de tons e sombras a partir de qualquer cor base. 9 tons, 9 sombras — copie códigos HEX individuais ou exporte todos como variáveis CSS.

9 tons · 9 sombrasExportar variáveis CSSCopiar em 1 clique

① Insira um código HEX ou escolha uma cor ② Gere 9 tons e 9 sombras ③ Clique em uma amostra para copiar

Cor base

Predefinições de marca:

Como funciona

Introduza qualquer cor HEX e a ferramenta gera 9 tons (mais claros) e 9 sombras (mais escuras) misturando matematicamente a cor base com branco e preto. Clique em qualquer amostra para copiar o seu código HEX.

Tons (Tints)

Um tom é criado misturando a cor base com branco. A percentagem indica quanto branco é adicionado — 90% é quase branco, 10% é apenas ligeiramente mais claro que o original.

Sombras (Shades)

Uma sombra é criada misturando a cor base com preto. A percentagem indica quanto preto é adicionado — 90% é quase preto, 10% é apenas ligeiramente mais escuro que o original.

Tons e sombras — como funcionam as escalas de cor

Tons: canal = base + (255 − base) × p. Sombras: canal = base × (1 − p). Interpolação RGB linear que gera uma rampa de 9 tons / 9 sombras — 19 passos — compatível com a escala Tailwind CSS 100–900 e tokens do Material Design. Exporte os 19 valores como custom properties CSS num bloco :root {}: de --color-tint-10 até --color-shade-90 e --color-base. Ideal para tokens de sistemas de design. Verifique sempre o contraste — WCAG AA exige 4,5:1.

Perguntas frequentes

Um tom é uma cor misturada com branco (mais clara). Uma sombra é uma cor misturada com preto (mais escura). Ambos mantêm o matiz original: os tons parecem pastel, as sombras mais profundas.

A ferramenta usa interpolação RGB linear. Tom a p%: canal = base + (255 − base) × p. Sombra a p%: canal = base × (1 − p). Isto dá uma progressão matematicamente uniforme.

90% de tom significa misturar 90% de branco com 10% da cor base. O resultado é dominado pelo branco. Para clarear subtilmente, use tons de 10–30%.

Sistemas como Tailwind CSS e Material Design usam uma escala de 9 passos onde 100 é o tom mais claro e 900 a sombra mais escura, com 500 (ou 600) representando tipicamente a cor base.

Tons e sombras por si só não garantem acessibilidade. É necessário verificar o rácio de contraste (mínimo 4,5:1 para texto normal sob WCAG AA). Use a ferramenta de Contraste para verificar.

Clique em "Exportar CSS" para copiar os 19 cores como propriedades CSS personalizadas (--color-tint-90 a --color-shade-90 e --color-base). Cole-as no bloco :root e use-as com var(--color-tint-30).

Sim — funciona com qualquer código HEX de 6 dígitos válido (#000000 a #FFFFFF), cobrindo os mais de 16 milhões de cores do modelo RGB de 8 bits. Tudo é calculado no browser sem envio de dados.

Tons e sombras — como funcionam as escalas de cor

Perguntas frequentes

Explore a nossa rede