Softonic

Gerador de Tons de Cor

Etapa 1 / 2
Próximo

Um tom é o resultado de misturar uma cor com branco, cada passo fica mais claro. O gerador pega sua cor base e produz uma escada de tons progressivamente mais claros, útil para faixas de paleta de sistema de design (100 → 400), preenchimentos de fundo sutis, estados de hover em primários escuros e fundos de badge/alerta onde a cor de destaque precisa estar presente, mas discreta.

Como os tons são gerados

  1. 1

    Escolha uma cor base

    Use o seletor de cores para escolher uma cor base. Funciona melhor com bases de média claridade; bases quase brancas têm pouco espaço para clarear.

  2. 2

    Escolha a contagem de passos

    Entre 3 e 20 passos, 10 por padrão. 10 dão uma escala completa de sistema de design; menos passos bastam para uma UI rápida.

  3. 3

    Misture com branco em porcentagens crescentes

    Com 10 passos, o primeiro tom mistura cerca de 9% de branco e o último cerca de 91%. A interpolação acontece diretamente no espaço RGB, então a saturação desbota à medida que a claridade aumenta.

  4. 4

    Leia os valores hex

    Cada amostra mostra seu valor hex. Use-os nas suas variáveis CSS, escala Tailwind ou mapa Sass.

Exemplo de escala de tons de #3B82F6

A tabela abaixo mostra o que a ferramenta produz com os 10 passos padrão:

Passo Hex Mistura Papel típico
0 #3B82F6 Base Marca primária (azul-500)
1 #4C8DF6 9,1% branco Hover leve em fundo escuro
2 #5E98F7 18,2% branco equivalente a azul-400
3 #70A4F8 27,3% branco
4 #82AFF9 36,4% branco azul-300
5 #94BAFA 45,5% branco
6 #A5C6FA 54,5% branco
7 #B7D1FB 63,6% branco
8 #C9DCFC 72,7% branco Fundo sutil (azul-100/200)
9 #DBE8FD 81,8% branco
10 #EDF3FE 90,9% branco azul-50

Tom + sombra = escala de sistema de design

Combine tons (mais claros) e sombras (mais escuras) em torno de uma única base para formar uma escala completa:

  • 50, 100, 200, 300, 400: tons (mais claros a ligeiramente mais claros que a base)
  • 500: base
  • 600, 700, 800, 900: sombras (ligeiramente mais escuras que a base até a mais escura)

Isso corresponde ao Tailwind, Material, Open Color, Radix UI e a maioria dos sistemas de design populares. Escalas de 10-11 passos são a norma.

Onde os tons brilham na UI

  • Fundos de alerta e badge: texto de erro-500 em fundo de erro-50 = reconhecimento imediato sem grito visual.
  • Estados de hover em fundos escuros: botões em uma superfície escura clareiam em direção a um tom mais claro ao passar o mouse.
  • Escalas sequenciais de visualização de dados: mapeamento de valor-para-cor onde alta magnitude é saturada e baixa magnitude desbota em direção ao branco.
  • Marcadores de categoria de avatar/gráfico: tom do primário quando nenhuma imagem/dado está presente.
  • Camadas de superfície: fundo de cartão ligeiramente tingido com a cor da marca para uma presença sutil da marca.

Por que os tons mais claros perdem saturação

O gerador mistura diretamente no espaço RGB. Conforme o branco é adicionado, a saturação cai mais rápido do que a claridade percebida sobe, então os passos superiores parecem pálidos ou acinzentados. Isso é comportamento normal da mistura em RGB:

  • Mistura RGB (esta ferramenta): simples e previsível. A saturação desbota de forma constante; passos muito claros parecem dessaturados.
  • Interpolação OKLCH ou LAB: usada por softwares de design para manter o croma mais estável ao clarear. Este gerador não oferece esses modelos; se você precisa de tons com matiz estável, produza-os em uma ferramenta de design compatível com OKLCH.
  • Clarear em HSL: aumenta a claridade sem misturar branco; o resultado pode parecer pastel em vez de tinta.

Limite de tom para UI utilizável

Tons muito claros (passo 8+) se aproximam do branco puro e se tornam visualmente indistinguíveis em um fundo branco. Útil como:

  • Destaques sutis de seleção atrás do texto.
  • Listras quase invisíveis em linhas em tabelas densas.

Mas não é bom para botões ou rótulos onde o usuário precisa ver uma cor distinta. Combine tons claros com um elemento mais escuro (borda, texto) para ancorá-los.

Perguntas frequentes

O gerador mistura diretamente em RGB, e a interpolação RGB reduz a saturação junto com a claridade, então os passos superiores derivam para o branco. Interpolar em OKLCH ou LAB, por outro lado, mantém uma dica visível do matiz base; use uma ferramenta compatível com OKLCH quando isso importar.

Semelhante, mas não idêntico. Misturar com branco reduz tanto a saturação quanto a claridade proporcionalmente; o ajuste de claridade HSL aumenta L independentemente. Tons parecem mais naturais (semelhantes a tinta); a claridade HSL pode empurrar para pastéis irreais.

Sim, o modo escuro geralmente precisa de uma “escada de claridade” diferente porque os fundos já são escuros. Muitos sistemas invertem a escala (o 50 do modo escuro é o equivalente de branco sobre escuro do 900 do modo claro).

Gere uma escada de tons de 5 passos (50-500) e uma escada de sombras de 5 passos (500-900) a partir da mesma base. Concatene para uma escala completa de 10-11 passos do sistema de design.

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.