Gerador de Tons de Cor: Claros, Escuros e Neutros
O Gerador de Tons de Cor transforma qualquer cor base em um conjunto completo de variações mais claras, mais escuras e mais suaves. Escolha uma cor e ele monta na hora três escalas — tons claros, tons escuros e tons neutros — que você pode copiar ou exportar direto para o seu projeto.
Foi feito para designers e desenvolvedores que precisam de degraus de cor consistentes em um design system: estados de hover e ativo, bordas, fundos e rampas de modo escuro partem todos de uma única cor de origem. Ajuste quantos degraus você quer e o tamanho de cada salto, depois pegue os valores em CSS, SCSS, Tailwind ou JSON.
Como gerar tons de cor
Escolha sua cor base
Clique no quadrado de cor para abrir o seletor, digite um código HEX no campo (completo #3B82F6 ou abreviado #F00) ou clique em Cor aleatória para um novo ponto de partida.
Defina etapas e incremento
Escolha quantas variações gerar com Etapas (5, 10, 15 ou 20) e a força de cada salto com Incremento (5%, 10% ou 20%). Os tons claros, escuros e neutros atualizam em tempo real.
Copie uma cor
Clique em qualquer amostra para copiar o código HEX para a área de transferência. Cada amostra também mostra a porcentagem de mistura, então você sabe exatamente o quanto ela está clara, escura ou suavizada.
Exporte a paleta completa
Abra o menu Copiar tudo e escolha Variáveis CSS, Variáveis SCSS, Config Tailwind ou JSON. A paleta inteira é copiada para a sua área de transferência, pronta para colar no seu código.
Recursos
Três tipos de variação de cor
Gere tons claros (misturados com branco para valores mais claros), tons escuros (misturados com preto para valores mais escuros) e tons neutros (misturados com cinza para valores suavizados) a partir de uma única cor base.
Controles flexíveis
Escolha 5, 10, 15 ou 20 etapas por escala e defina o salto de intensidade em 5%, 10% ou 20% para que a rampa combine com o seu design system.
Vários métodos de entrada
Use o seletor visual de cores, digite um código HEX diretamente (o abreviado como #F00 se expande automaticamente) ou gere uma cor aleatória com um clique.
Pré-visualização em tempo real
Cada escala é redesenhada na hora quando você muda a cor base, as etapas ou o incremento, então você refina o resultado sem esperar.
Opções de exportação
Copie a paleta inteira como propriedades personalizadas do CSS, variáveis SCSS, uma config de cores do Tailwind ou JSON estruturado para qualquer fluxo de trabalho.
Cópia com um clique
Clique em qualquer amostra para copiar só o código HEX dela, ou use Copiar tudo para pegar de uma vez toda a paleta gerada.
URL compartilhável
O link da página é atualizado com sua cor, etapas e incremento, então quem você compartilhar abre exatamente a mesma paleta.
Roda no seu navegador
Toda a matemática das cores acontece no seu dispositivo. Nada é enviado, então a ferramenta funciona na hora e mantém suas escolhas privadas.
Perguntas frequentes
Qual é a diferença entre tint, shade e tone?
Um tint (tom claro) adiciona branco a uma cor para deixá-la mais clara, um shade (tom escuro) adiciona preto para deixá-la mais escura, e um tone (tom neutro) adiciona cinza para suavizá-la sem mudar muito a sua luminosidade. Esta ferramenta monta as três escalas a partir da sua cor base ao mesmo tempo.
Como gero tons claros e escuros de uma cor?
Escolha uma cor base com o seletor, um código HEX ou o botão de cor aleatória. A escala de tons escuros aparece logo abaixo da cor base, ficando cada vez mais escura. Ajuste Etapas e Incremento para controlar quantos tons você recebe e a distância entre eles.
Como Etapas e Incremento funcionam juntos?
Etapas define quantas amostras gerar e Incremento define a diferença em porcentagem entre elas. Com 10 etapas e incremento de 10% você obtém valores em 10%, 20%, 30% e assim por diante até 100%. Como a mistura para em 100%, um incremento de 20% limita cada escala a 5 amostras (20%, 40%, 60%, 80%, 100%).
Dá para exportar os tons como variáveis CSS, SCSS ou Tailwind?
Sim. Abra o menu Copiar tudo e escolha Variáveis CSS, Variáveis SCSS, Config Tailwind ou JSON. A paleta inteira é copiada para a sua área de transferência, pronta para colar na sua folha de estilos, no arquivo Sass, no tema do Tailwind ou em qualquer estrutura baseada em dados.
Quais formatos de cor posso inserir?
Você define a cor base com o seletor visual ou digitando um código HEX. Tanto códigos completos de 6 dígitos como #3B82F6 quanto o abreviado de 3 dígitos como #F00 funcionam — o abreviado é expandido automaticamente (por exemplo, #F00 vira #FF0000). As amostras geradas também são fornecidas como valores HEX.
Como compartilho minha paleta?
Copie o link da barra de endereços do seu navegador. Ele carrega sua cor base, a quantidade de etapas e o incremento, então abri-lo recria exatamente o mesmo conjunto de tons claros, escuros e neutros.
Meus dados ficam armazenados em algum lugar?
Não. Todo cálculo roda no seu navegador, nada é enviado a um servidor, e suas escolhas de cor não são armazenadas nem rastreadas.
Ainda não há comentários. Seja o primeiro a comentar!