Gerador de Tons de Cor

Gratuito DevTools

Gerador de Tons de Cor

Gere instantaneamente 10 tons de qualquer cor hexadecimal, do mais claro ao mais escuro. Visualize o contraste WCAG e copie os valores hex com um clique. Ideal para criar paletas de design consistentes.

4.1k usuarios Atualizado em Mar 2026 4.7/5

Avalie esta ferramenta:

4.7 (618 votos) Obrigado!

Tons de Cor

Como Usar

Gere uma paleta de tons em segundos.

Escolha a cor base

Use o seletor visual ou digite um codigo hex no formato #RRGGBB.

Clique em Gerar Tons

Os 10 tons sao gerados automaticamente ao alterar a cor.

Confira o contraste

O badge "A" mostra se o texto branco ou preto tem melhor contraste sobre o tom.

Copie o hex

Clique em "Copiar hex" em qualquer tom para copiar o valor para a area de transferencia.

Sobre o Gerador de Tons

Os tons sao gerados misturando a cor base com branco (para tons claros) e com preto (para tons escuros). O resultado e uma escala de 10 tons que vai de 50% mais claro a 40% mais escuro, passando pela cor original no centro.

Indicador de contraste:

O badge branco "A" indica que texto branco tem melhor legibilidade sobre aquele tom
O badge preto "A" indica que texto preto e mais legivel
O calculo usa a formula de luminancia relativa do padrao WCAG 2.1
Para acessibilidade AA, o contraste minimo deve ser 4.5:1 para texto normal

Artigo

Paletas de Cores no Design: Como Criar Tons Consistentes e Acessiveis

Por Equipe Chipak • Atualizado em Mar 2026 • 6 min de leitura

Neste artigo

O que sao tons (shades e tints)
Como os tons sao calculados
Contraste e acessibilidade (WCAG)
Sistemas de design e escalas de cor
Quando usar tons claros vs escuros
Perguntas frequentes

1. O Que Sao Tons (Shades e Tints)

Em teoria das cores, tints sao versoes mais claras de uma cor, obtidas misturando-a com branco. Shades sao versoes mais escuras, obtidas misturando com preto. Juntos, formam uma escala tonal que e fundamental para criar interfaces visuais coerentes e hierarquicas.

2. Como os Tons Sao Calculados

Nossa ferramenta usa interpolacao linear no espaco RGB para calcular os tons. Para um tint de X%, cada canal de cor e interpolado entre o valor original e 255 (branco). Para um shade, e interpolado entre o valor original e 0 (preto). Isso e diferente de ajustar luminosidade no espaco HSL, producindo resultados mais previsıveis para uso em interfaces.

3. Contraste e Acessibilidade (WCAG)

O padrao WCAG 2.1 define razoes minimas de contraste para garantir legibilidade. O calculo usa a luminancia relativa de cada cor — uma formula que pondera os canais RGB de acordo com a sensibilidade do olho humano a cada comprimento de onda.

AA normal: contraste minimo de 4.5:1
AA grande (18px+ ou 14px negrito): 3:1
AAA: 7:1 para texto normal

4. Sistemas de Design e Escalas de Cor

Frameworks populares como Tailwind CSS, Material Design e Radix UI usam escalas numeradas de 50 a 900 (ou 100 a 1000). Cada numero representa um tom progressivamente mais escuro. Nossa ferramenta gera uma escala equivalente que pode ser mapeada diretamente para esses sistemas.

"Uma boa escala de cor permite que designers e desenvolvedores escolham tons com confianca, sabendo que qualquer combinacao na escala sera visualmente harmoniosa."

5. Quando Usar Tons Claros vs Escuros

Tons claros sao ideais para fundos, areas de surface, badges e estados hover em temas claros. Tons escuros sao usados para texto sobre fundos claros, bordas com maior peso visual e elementos de enfase. Em temas escuros (dark mode), a logica se inverte: tons escuros viram fundos e tons claros viram elementos de destaque.

6. Perguntas Frequentes

Posso usar os tons gerados em producao?

Sim. Os valores hex gerados sao tecnicamente precisos e prontos para uso em CSS, Figma, Tailwind ou qualquer outra ferramenta de design/desenvolvimento.

Por que os tons parecem diferentes do Tailwind?

O Tailwind usa uma curadoria manual para sua paleta de cores — os tons nao sao gerados mecanicamente, mas refinados por designers. Nossa ferramenta usa interpolacao matematica, que pode diferir visualmente mas e igualmente valida para criar suas proprias paletas.