Gerador de Paleta de Cores Tailwind CSS

O que é o Gerador de Paleta de Cores Tailwind CSS?

O Gerador de Paleta de Cores é uma ferramenta projetada para desenvolvedores e designers que precisam criar escalas de cores personalizadas compatíveis com o padrão do Tailwind CSS (pesos numéricos de 50 a 950). Em vez de perder tempo ajustando a luminosidade de cada variante manualmente, você pode simplesmente fornecer uma cor principal (peso 500) ou enviar uma imagem de referência para obter a paleta completa em segundos.

Privacidade em Primeiro Lugar: 100% Local

Sua segurança é garantida. Esta ferramenta funciona integralmente no seu próprio navegador utilizando Javascript. Nenhuma imagem, cor ou arquivo que você insere ou arrasta para a tela é enviada para servidores externos. O processamento da imagem é feito via Canvas API diretamente na memória do seu dispositivo, garantindo total privacidade e velocidade.

Como criar sua escala de cores

Defina a cor base: Digite um código HEX válido, clique no seletor de cores ou arraste uma imagem da qual deseja extrair o tom dominante. Esta cor se tornará o peso 500 da sua paleta.
Faça o ajuste fino (Opcional): Expanda a seção de saturação caso a paleta gerada esteja muito vibrante ou opaca. Utilize o controle deslizante para neutralizar tons pastel ou realçar cores vivas sem alterar a cor base.
Valide a acessibilidade: Observe a seção de "Preview". A ferramenta calculará automaticamente o contraste e a luminância para avisar se textos claros ou escuros ficam legíveis sobre a sua cor.
Exporte o código: Escolha entre copiar as variáveis do tailwind.config.js, baixar um arquivo com Variáveis CSS puras ou um JSON estruturado para o seu projeto.

Principais Funcionalidades Implementadas

Algoritmo Inteligente de Luminosidade (HSL) Ao contrário de clareadores simples de HEX, a ferramenta converte as cores para o espectro HSL e aplica uma curva matemática semelhante à paleta nativa do Tailwind, preservando o matiz e equilibrando as pontas (50 e 950).
Extração de Cores em Imagens Apoio para Drag and Drop. Arraste qualquer fotografia e a ferramenta calculará instantaneamente a cor média dos pixels para usar como ponto de partida da paleta.
Memória de Preferências (LocalStorage) Você não perde o trabalho se atualizar a página. O formato de exportação favorito e a última cor gerada ficam salvos localmente na memória do seu navegador.

Perguntas Frequentes (FAQ)

Como a escala de cores do Tailwind é calculada matematicamente?

Nossa ferramenta utiliza a conversão do código HEX para o formato HSL (Matiz, Saturação e Luminosidade). A cor que você define atua como o peso 500. A partir dela, desenhamos uma curva de clareamento contínua até o peso 50 (que se aproxima de 95% de luminosidade) e uma curva de escurecimento até o peso 950 (atingindo em torno de 8% de luminosidade).

As imagens enviadas para extração são salvas em algum servidor?

Não. Para garantir a sua privacidade e acelerar a resposta da interface, o upload de imagens é manipulado exclusivamente pela tecnologia Canvas API presente no seu próprio navegador web. Nenhum dado de imagem sai da sua máquina.

Posso usar as paletas geradas em projetos sem Tailwind?

Sim! Embora a nomenclatura (50-950) seja familiar ao ecossistema do Tailwind CSS, você pode alternar a aba de exportação para "CSS Variables". Isso criará um código nativo :root com variáveis CSS padrão que podem ser aplicadas em qualquer projeto web vanilla, Bootstrap ou frameworks baseados em JavaScript como React e Vue.

Por que algumas cores geram um aviso de contraste?

Cores de base extremamente claras (como um amarelo bebê) ou extremamente escuras dificultam o cálculo da curva de contraste ideal, criando paletas desbalanceadas. O módulo de acessibilidade da nossa ferramenta mede a luminância relativa para alertar quando a sua cor principal pode apresentar baixa legibilidade em interfaces de usuário reais, de acordo com as diretrizes da WCAG.

Gerador de Paleta de Cores Tailwind CSS