Gerador de sombras e tintes de cor

Gere sombras e tintes de qualquer cor base

Insira uma cor hex e escolha quantos passos deseja. A ferramenta produz duas escalas: as sombras misturam a cor base em direção ao preto e os tintes misturam em direção ao branco. Clique em qualquer amostra para copiar seu valor hex. As escalas são distribuídas uniformemente, formando uma rampa suave e previsível adequada para sistemas de design, propriedades personalizadas de CSS ou definições de paleta do Tailwind.

Cada amostra mostra seu valor hex ao passar o cursor. A cor base aparece entre as duas escalas para você ver o intervalo completo de relance. Tudo é calculado no navegador — nada é enviado.

Perguntas frequentes

Qual é a diferença entre uma sombra e um tinte? Uma sombra mistura a cor com preto (mais escura), enquanto um tinte mistura com branco (mais clara). Juntos criam uma escala de luminosidade completa.

Posso usar o resultado no Tailwind? Sim. Mapeie os valores hex para as chaves de cor do Tailwind (50 a 950) atribuindo os tintes às chaves mais claras e as sombras às mais escuras.