🌗
Gerador de Tons e Sombras
Transforme qualquer cor com uma escala completa de tons (clareamento) e sombras (escurecimento) baseados na luminância matemática.
Mistura com Branco (+Lightness)
Base 0%
Tint 10%
Tint 20%
Tint 30%
Tint 40%
Tint 50%
Tint 60%
Tint 70%
Tint 80%
Tint 90%
Mistura com Preto (+Darkness)
Base 0%
Shade 10%
Shade 20%
Shade 30%
Shade 40%
Shade 50%
Shade 60%
Shade 70%
Shade 80%
Shade 90%
Ferramentas Relacionadas
O Gerador de Shades e Tints do Utilitarioz cria escalas de tons mais escuros (shades) e mais claros (tints) a partir de qualquer cor, com export em HEX, RGB e CSS custom properties — seguindo o padrão do Tailwind CSS.
Shades vs. Tints vs. Tones
- ▸Shade — cor misturada com preto (mais escura)
- ▸Tint — cor misturada com branco (mais clara)
- ▸Tone — cor misturada com cinza (menos saturada)
Uso prático em sistemas de design
Escalas de 50 a 900 (como no Tailwind) permitem usar a mesma cor base para fundos sutis (50), texto principal (700) e estados hover (800), mantendo coerência visual.
Perguntas Frequentes — Gerador de Tons e Sombras
Como gerar shades compatíveis com Tailwind?
Nossa ferramenta gera a escala nos mesmos intervalos do Tailwind (50, 100, 200... 900) prontos para adicionar como custom colors na configuração do Tailwind.