Gerador de Tons & Sombras
21 cores
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Detalhes técnicos
Como o Gerador de Tons e Sombras Funciona
O Que a Ferramenta Faz
O Gerador de Tons e Sombras cria tons mais claros (misturados com branco) e sombras mais escuras (misturadas com preto) a partir de qualquer cor base. Insira uma cor e escolha o número de etapas para gerar um gradiente suave de variações. Cada etapa exibe valores HEX, RGB e a porcentagem de mistura, facilitando a criação de escalas de cores consistentes para design de UI, branding e visualização de dados.
Casos de Uso Comuns para Desenvolvedores
Desenvolvedores usam geradores de tons e sombras ao criar escalas de tokens de design (por exemplo, blue-100 até blue-900), criar estados de hover e ativo para elementos interativos, projetar hierarquias de cores acessíveis e produzir cores consistentes de fundo e superfície para temas claros e escuros. A ferramenta é essencial para criar paletas de cores personalizadas do Tailwind CSS ou sistemas de cores do Material Design.
Como Tons e Sombras Funcionam
Um tom é criado ao misturar uma cor com branco, aumentando sua luminosidade. Uma sombra é criada ao misturar com preto, diminuindo a luminosidade. A fórmula para tons é: new = base + (255 - base) × factor. Para sombras: new = base × (1 - factor). As etapas são distribuídas uniformemente entre a cor base e o branco puro (tons) ou o preto puro (sombras), produzindo um gradiente linear de valores de cor.
Armadilhas Comuns e Casos de Borda
A mistura linear com branco ou preto pode produzir tons desbotados ou sombras "lamacentas" para alguns matizes. Amarelos podem parecer esverdeados quando escurecidos, e azuis podem perder vivacidade quando clareados. Para escalas perceptualmente uniformes, considere usar os espaços de cor OKLCH ou CIELAB. Sempre verifique se seus tons mais claros e sombras mais escuras mantêm contraste suficiente em relação aos fundos pretendidos.
Quando Usar Esta Ferramenta vs Código
Use esta ferramenta no navegador para exploração rápida e para gerar escalas de cores durante o trabalho de design. Para sistemas de design em produção, gere tons e sombras programaticamente usando bibliotecas de cores como chroma.js ou culori, que suportam espaços de cor perceptualmente uniformes e podem gerar tokens de design em qualquer formato.