Gerador de Matizes de Cor Gere matizes mais claros de qualquer cor com quantidade de etapas ajustável.
Gerador de Matizes de Cor
Gere matizes mais claros de qualquer cor com quantidade de etapas ajustável.
Escolha a Cor Base
Selecione a cor inicial.
Defina as Etapas
Escolha quantas tons progressivamente mais claras você deseja gerar.
Copie as Tons
Copie tons individuais ou o conjunto completo.
What Is Gerador de Matizes de Cor?
Um gerador de tons de cor cria versões progressivamente mais claras de qualquer cor base aumentando sua luminosidade em direção ao branco no espaço de cor HSL. Os tons preservam a tonalidade original e a saturação enquanto adicionam branco, produzindo versões mais suaves e delicadas da cor. Os tons mais claros se aproximam do território dos pastéis - aquelas cores leves e arejadas que funcionam lindamente para fundos, cartões e elementos de interface do usuário sutis. Os tons são o oposto das sombras: enquanto as sombras escurecem em direção ao preto, os tons clareiam em direção ao branco. Juntos, eles formam a base de qualquer escala de cor completa. Essa ferramenta gera tons com distribuição uniforme de luminosidade e mostra o percentual de luminosidade para cada etapa, tornando fácil criar paletas de cores sistemáticas para sistemas de design.
Why Use Gerador de Matizes de Cor?
-
O clareamento baseado em HSL preserva a identidade da tonalidade em todas as tons
-
Ajustável de 3 a 15 etapas de tom
-
Mostra o percentual de claridade para cada tom
-
Ideal para fundos, cartões e elementos de interface do usuário sutis
-
Copia com um clique para tons individuais ou o conjunto completo
Common Use Cases
Cores de Fundo
Crie fundos leves e suaves que harmonizam com as cores mais escuras correspondentes.
Superfícies de Cartão
Gere superfícies sutis e tonalizadas para cartões, modais e painéis.
Fundos de Alerta
Crie fundos leves para mensagens de sucesso, aviso e erro.
Tokens de Design
Construa a extremidade clara da escala de cores (50, 100, 200, 300) para sistemas de design.
Technical Guide
O gerador de tons converte a cor base para HSL e distribui valores de luminosidade da cor base até quase branco. A fórmula é: L = luminosidadeBase + (100 - luminosidadeBase) × (i/(N-1)), onde i varia de 0 a N-1. Isso garante que a primeira cor seja a original e a última se aproxime do branco. A tonalidade e a saturação permanecem constantes. Na teoria da cor tradicional, um tom é uma tonalidade misturada com branco. O equivalente digital aumenta a luminosidade no espaço HSL. Valores de luminosidade muito altos (90%+) produzem cores pastéis que são amplamente usadas no design de interface do usuário moderno para fundos e acentos sutis. A distribuição uniforme garante etapas visualmente equilibradas em toda a gama de tons.
Tips & Best Practices
-
1As tons mais claras (90-95% de claridade) fazem excelentes fundos de página
-
2Use tons com 70-80% de claridade para superfícies de cartão e painel
-
3Combine geradores de tom e sombra para uma escala de cores completa do sistema de design
-
4Tons em 85-90% de claridade criam lindas cores pastéis
-
5Certifique-se de que o texto escuro tenha contraste suficiente contra fundos tonizados (use o verificador de contraste)
Related Tools
Gerador de Paleta Monocromática
Gere uma paleta de cores monocromáticas a partir de qualquer cor base.
🎨 Color Tools
Gerador de Matizes de Cor
Gere matizes mais escuros de qualquer cor com quantidade de passos ajustável.
🎨 Color Tools
Misturador de Cores
Misture duas cores juntas com uma proporção ajustável e veja o gradiente completo.
🎨 Color Tools
Verificador de Razão de Contraste
Verifique as razões de contraste da WCAG entre cores de primeiro plano e segundo plano.
🎨 Color Tools
Gerador de Paleta de Cores Acessível
Gere paletas de cores que atendem aos requisitos de contraste da WCAG.
🎨 Color ToolsFrequently Asked Questions
Q O que é uma tonalidade de cor?
Q Como as tons se diferenciam da opacidade?
Q Posso criar cores pastéis com essa ferramenta?
About This Tool
Gerador de Matizes de Cor is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.