Gerador de tons claros e escuros
Gere variações mais claras e mais escuras de qualquer cor base
Adicione uma cor acima para gerar os tons claros e escuros
Aceita #RGB e #RRGGBB — digite várias cores de uma vez
Como funciona o Gerador de tons claros e escuros
Monte uma escala de cores completa a partir de qualquer cor base. Gere tons mais claros e mais escuros para design systems e desenvolvimento de interfaces.
Tons claros (tints)
Gere variações cada vez mais claras misturando a cor base com branco. Perfeito para fundos, estados de hover e superfícies sutis da interface.
Tons escuros (shades)
Crie variações mais profundas misturando com preto. Use-as para texto sobre fundos coloridos, estados ativos e alternativas de modo escuro.
Passos ajustáveis
Controle o número de passos de cada escala. Gere 5 variações rápidas ou 20 incrementos finos para sistemas detalhados de design tokens.
Copie e compartilhe
Copie qualquer valor em HEX, RGB ou HSL. Compartilhe a escala inteira por URL para que os colegas vejam exatamente o mesmo conjunto de cores.
Perguntas frequentes
Um tom escuro (shade) é uma cor misturada com preto, o que a deixa mais escura. Um tom claro (tint) é uma cor misturada com branco, o que a deixa mais clara. Juntos, eles formam uma escala completa, do tom mais claro ao mais escuro de qualquer cor base.
Design systems usam escalas de cores numeradas (50, 100, 200… 900) para garantir um uso consistente em todo o produto. Os valores mais claros servem para fundos e bordas, os intermediários para ícones e texto secundário, e os escuros para texto principal e ênfase.
Sim. Digite qualquer cor em HEX, RGB ou HSL como base. O gerador cria a escala completa de tons claros e escuros a partir desse ponto. Você também pode usar o seletor de cores para escolher a base visualmente.
A opacidade afeta o elemento inteiro, incluindo texto e bordas, e o resultado depende do fundo que está atrás. Tons claros são cores sólidas que ficam iguais em qualquer fundo. São mais previsíveis e acessíveis que a transparência.