Gerador online de shades e tints de cor
Gere tints e shades de uma cor para sua paleta, no seu navegador.
Tints (lighter)
#57ff37#74ff5b#92ff7e#b0ffa1#ceffc4#ebffe8Base
#39ff14Shades (darker)
#061a02#0e4005#176608#1f8c0b#28b30e#30d911Tints = mixed toward white, shades = mixed toward black.
🔒 100 % no cliente — nenhum dado enviado
Gere instantaneamente uma paleta de tints mais claros e shades mais escuros a partir de uma única cor. Perfeito para montar uma escala consistente (50 a 900) para seus design systems e interfaces. A ferramenta roda 100% no seu navegador, então nenhuma cor é enviada online.
What is it for?
- ▸ Criar uma escala de cores consistente para um design system
- ▸ Obter variantes hover, active e disabled de um botão
- ▸ Gerar fundos claros acessíveis e texto escuro a partir de uma cor de marca
- ▸ Expandir uma cor Tailwind ou variável CSS em dez etapas
FAQ
Qual é a diferença entre um tint e um shade?
Um tint é criado adicionando branco a uma cor para clareá-la, enquanto um shade é produzido adicionando preto para escurecê-la.
Como gero uma paleta a partir de uma única cor?
Informe sua cor em hex, RGB ou HSL, e a ferramenta calcula automaticamente uma série de tons mais claros e mais escuros prontos para copiar.
Essas cores são compatíveis com Tailwind CSS?
Sim, a escala gerada segue a lógica de 50 a 900 usada pelo Tailwind, então você pode colocá-la diretamente na configuração do seu tema.