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

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas