Gerador de Tonalidades & 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 Funciona o Gerador de Tons Claros e Escuros
O Que a Ferramenta Faz
O Gerador de Tons Claros e Escuros cria tons mais claros (misturados com branco) e tons mais escuros (misturados com preto) a partir de qualquer cor base. Introduza uma cor e escolha o número de passos para gerar um gradiente suave de variações. Cada passo apresenta valores HEX, RGB e a percentagem de mistura, facilitando a criação de escalas de cor consistentes para design de UI, branding e visualização de dados.
Casos de Uso Comuns para Programadores
Os programadores usam geradores de tons claros e escuros ao criar escalas de tokens de design (por exemplo, blue-100 até blue-900), criar estados hover e active para elementos interativos, desenhar hierarquias de cor acessíveis e produzir cores consistentes para fundos e superfícies em temas claros e escuros. A ferramenta é essencial para criar paletas de cores personalizadas no Tailwind CSS ou sistemas de cores do Material Design.
Como Funcionam os Tons Claros e Escuros
Um tom claro é criado ao misturar uma cor com branco, aumentando a sua luminosidade. Um tom escuro é criado ao misturar com preto, diminuindo a luminosidade. A fórmula para tons claros é: new = base + (255 - base) × factor. Para tons escuros: new = base × (1 - factor). Os passos são distribuídos uniformemente entre a cor base e o branco puro (tons claros) ou o preto puro (tons escuros), produzindo um gradiente linear de valores de cor.
Erros Comuns e Casos Limite
A mistura linear com branco ou preto pode produzir tons claros deslavados ou tons escuros acastanhados para alguns matizes. Os amarelos podem parecer esverdeados quando escurecidos, e os azuis podem perder vivacidade quando clareados. Para escalas perceptualmente uniformes, considere usar os espaços de cor OKLCH ou CIELAB. Verifique sempre se os seus tons mais claros e os seus tons mais escuros mantêm contraste suficiente face aos fundos pretendidos.
Quando Usar Esta Ferramenta vs Código
Use esta ferramenta no browser para exploração rápida e para gerar escalas de cor durante o trabalho de design. Para sistemas de design em produção, gere tons claros e escuros programaticamente usando bibliotecas de cor como chroma.js ou culori, que suportam espaços de cor perceptualmente uniformes e conseguem exportar tokens de design em qualquer formato.