Softonic

Gerador de Tons de Cor

Etapa 1 / 2
Resultados

Um tom é o resultado de misturar uma cor com preto, cada passo fica mais escuro. O gerador pega uma cor base HEX e produz de 3 a 20 passos (10 por padrão) de tons cada vez mais escuros, além dos matizes mais claros da mesma base. Útil para escadas de paletas de sistemas de design (500 → 900), estados de botão pressionado/ativo, cores de texto que permanecem legíveis e sobreposições de sombra. Cada passo é mostrado como uma amostra com seu valor hex pronto para copiar.

Como funciona a geração de tons

  1. 1

    Escolha uma cor base

    Use o seletor de cores ou, no modo em etapas, passe um valor hex pela URL da página. A base fica entre a faixa de tintes e a de tons.

  2. 2

    Escolha a contagem de passos

    De 3 a 20 passos, 10 por padrão. Mais passos dão uma escada mais suave; menos passos, saltos mais fortes.

  3. 3

    Misture com preto em passos uniformes

    Cada passo escala os canais vermelho, verde e azul pelo mesmo fator, o que equivale a misturar com preto (ou com branco para os matizes) em passos uniformes. Com 10 passos, cada um fica cerca de 9 % mais escuro ou mais claro. O matiz permanece idêntico à base.

  4. 4

    Leia a escala

    Cada amostra exibe seu valor hex. Selecione o texto para copiá-lo em CSS, em um tema Tailwind ou em um arquivo de design tokens.

Tom escuro, matiz e tonalidade

  • Tom escuro (shade): cor + preto → mais escuro.
  • Matiz (tint): cor + branco → mais claro.
  • Tonalidade (tone): cor + cinza → menos saturada.

Este gerador produz tanto tons escuros quanto matizes a partir da mesma base. O par matiz+tom geralmente forma uma paleta de sistema de design (por exemplo, brand-100 a brand-900 onde 500 é a base).

Escala de exemplo: #3B82F6 (Tailwind blue-500)

Passo Hex Mistura Papel no sistema de design
0 #3B82F6 Base Marca primária (por exemplo, blue-500)
1 #316CCD 17 % preto Estado de hover
2 #2756A4 33 % preto Estado pressionado/ativo (blue-600)
3 #1D417B 50 % preto blue-700
4 #132B52 67 % preto blue-800
5 #091528 83 % preto blue-900

A tabela mostra uma escala de 5 passos: cada passo é um sexto do caminho até o preto.

Como os passos são calculados

A ferramenta escala os canais vermelho, verde e azul da base pelo mesmo fator a cada passo. Isso equivale a misturar com preto na faixa de tons escuros e com branco na de matizes, em passos uniformes. Com 10 passos, cada um fica cerca de 9 % mais escuro ou mais claro que o anterior.

Como todos os canais são escalados igualmente, o matiz da base é preservado exatamente: uma base azul continua azul, uma base verde continua verde. Misturar com preto também reduz a saturação junto com a luminosidade, então os passos escuros parecem naturais em vez de brilhantes. Reduzir apenas a luminosidade, sem tocar na saturação, deixa as cores escuras supersaturadas.

Usando tons na UI

  • Botão: base para estado normal, 1-2 passos mais escuros para hover, 2-3 passos mais escuros para ativo/pressionado.
  • Texto do corpo: 2-3 passos mais escuros que a base garantem legibilidade em fundo branco; mais claro para texto secundário.
  • Borda / divisor: 1-2 passos mais escuros que o fundo, o suficiente para delinear sem sobrecarregar.
  • Sombras: passo mais escuro (ou mais escuro) com alfa reduzido em vez de um novo cinza.
  • Visualização de dados: use tons de um único matiz para uma escala sequencial (magnitudes de valor), ou emparelhe tons de dois matizes para escalas divergentes (positivo e negativo).

Armadilhas comuns

  • Passos demais se comprimem em faixas indistinguíveis. Escalas de 10 passos funcionam bem porque cada passo fica cerca de 9 % mais escuro; com 20 passos as diferenças ficam sutis. Para contrastes fortes, prefira 3-5 passos.
  • Aqui não há desvio de matiz: cada passo escala todos os canais igualmente, então um vermelho continua vermelho e um verde continua verde. O desvio de matiz aparece ao interpolar entre duas cores diferentes, algo que esta ferramenta não faz.
  • Ignorando acessibilidade: tons que parecem harmoniosos podem falhar no contraste WCAG contra o fundo. Sempre verifique o contraste em cada passo.
  • Escalas apenas de tons parecem opressivas em fundos escuros. Emparelhe com uma escala de matizes para um modo escuro utilizável.

Perguntas frequentes

Para um sistema de design, 5 passos de tom + 5 passos de matiz (10 no total ao redor da base) é a convenção comum. Para cores rápidas de estado de UI (hover, ativo), 3 passos são suficientes.

A mistura uniforme usada aqui mantém cada passo em linha reta entre a base e o preto, então os passos intermediários ficam limpos. Um meio turvo geralmente vem de uma ferramenta que interpola entre duas cores diferentes, ou que reduz a luminosidade sem reduzir a saturação.

Cores escuras já têm pouco espaço para escurecer antes de virar preto; uma base de roxo escuro produz apenas 2-3 passos distintos antes de a escala colapsar. Escolha uma base de luminosidade média para escalas mais ricas.

Parecido na intenção, mas misturar com preto reduz a saturação junto com a luminosidade, o que geralmente parece mais natural. Reduzir apenas a luminosidade mantém a saturação alta e pode gerar cores escuras supersaturadas.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Contador de FPS

Meça o FPS do navegador com requestAnimationFrame: suavização, taxa de quadros mínima e máxima, limite de alerta e gráfico opcional. Roda localmente, sem upload nem API.

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa, decodificado 8 bits por vez.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.