Gerador de tons Tailwind

Crie uma escala de tons prática

Uma única cor de marca raramente basta para uma interface completa. Os botões precisam de estados hover, os cartões de fundos claros, as bordas de um tom mais discreto e o texto, por vezes, de um companheiro mais escuro. Este gerador de tons Tailwind transforma um valor HEX numa rampa 50-950 familiar, para que possa explorar rapidamente como essa cor se comporta em superfícies claras e escuras. Os valores gerados são determinísticos e fáceis de copiar, o que os torna úteis para protótipos, revisões de design, propriedades personalizadas CSS e documentação de design tokens.

A ferramenta usa passos de luminosidade HSL para manter o matiz reconhecível, empurrando a cor para tons muito claros e sombras profundas. Não é um algoritmo oficial do Tailwind e não tenta igualar exatamente as paletas afinadas à mão do Tailwind. Em vez disso, oferece um ponto de partida limpo que pode ser ajustado em contexto. Se a sua cor base já for muito clara ou muito escura, observe com atenção os valores intermédios e decida se a rampa precisa de um refinamento manual.

Usar os tons gerados em CSS

Copie a saída CSS quando quiser variáveis prontas para o navegador, como --brand-500 e --brand-700. Copie a saída JSON quando estiver a preparar tokens para um ficheiro de configuração, um style dictionary ou uma página de documentação. Numa interface típica, 50 e 100 funcionam bem para superfícies suaves, 200 e 300 para bordas ou selos, 500 para a cor de ação principal e 600 a 800 para estados hover, pressionado ou de texto. Os valores 900 e 950 são os mais fortes, por isso reserve-os para temas escuros ou elementos de grande destaque.

Verifique o contraste antes de publicar

As escalas de tons são práticas, mas não garantem automaticamente texto acessível. Uma cor que parece equilibrada como amostra pode falhar no contraste atrás de etiquetas pequenas ou controlos desativados. Depois de copiar uma escala, teste as combinações que a sua interface realmente usa: texto principal sobre fundos claros, texto branco em botões de ação, anéis de foco à volta dos campos e bordas face às superfícies próximas. Trate este gerador como um primeiro passo no fluxo de trabalho de um sistema de cores e verifique depois as combinações finais com um verificador de contraste antes de publicar.