Gerador de Cores Tailwind
Gere a paleta de 11 tonalidades de 50 a 950 do Tailwind CSS e o código de configuração a partir de um código Hex
Características
Gere automaticamente 11 tonalidades a partir de 1 cor
Coloque a cor inserida em 500 e calcule as variações de 50 a 950
Suporte para v3 e v4
Alterne entre os formatos config e @theme com abas
Copie Hex por tonalidade
Use botões de cada amostra de cor para copiar códigos de cor individuais
Paleta atualizada durante a entrada
Sem necessidade de botão de execução — teste e compare cores em tempo real
Como usar
Insira o Hex da cor base
Insira o código Hex ou clique na amostra de cor à esquerda para abrir o seletor de cores
Insira o nome da cor, se necessário
Insira o nome da cor em letras minúsculas para usar no código. Se deixado em branco, será usado 'primary'
Visualize as 11 tonalidades
Veja as amostras de cores de 50 a 950 e seus códigos Hex, copiando uma cor por vez com o botão de cópia
Escolha o formato de saída e copie
Selecione v3 ou v4 e clique em 'Copiar código' para colar no tailwind.config.js ou arquivo CSS
Casos de uso
Criar tonalidades de cores de marca
Use uma única cor de marca para criar tonalidades consistentes para hovers de botões e fundos
Adicionar cores não incluídas na paleta padrão
Adicione cores exclusivas do projeto em 11 tonalidades ao arquivo de configuração do Tailwind
Criar configuração @theme do v4
Escreva variáveis CSS do Tailwind v4 a partir da cor principal do seu site
Preparar implementação de mockups de design
Prepare códigos de 11 tonalidades a partir das cores especificadas no mockup e transfira para ferramentas de design
Conhecimento básico
O que significam 50–950 no Tailwind
As cores no Tailwind CSS são representadas em 11 níveis numéricos de 50 (mais claro) a 950 (mais escuro) para indicar brilho, com 500 sendo o padrão da cor. Os números são usados no final de nomes de classe, como 'bg-primary-500' ou 'text-primary-700'.
- Faixa de 50–300：A faixa de 50–300 consiste em cores claras frequentemente usadas para fundos e preenchimentos leves, com brilho suficiente para manter a legibilidade de texto escuro sobreposto.
- Faixa de 600–950：A faixa de 600–950 consiste em cores escuras frequentemente usadas para hovers de botões e cores de texto em títulos, visíveis claramente em fundos brancos.
Diferenças na definição de cores entre v3 e v4
No Tailwind CSS v3, as cores são definidas em JavaScript no tailwind.config.js, e no v4, são definidas como variáveis CSS dentro de @theme em arquivos CSS. Independentemente do formato, as cores definidas são usadas com o mesmo nome de classe como 'bg-primary-500'.
- Formato v3：O formato v3 define cores aninhando nomes e níveis dentro de theme.extend.colors, como 'primary: { 500: '#3B82F6' }'.
- Formato v4：O formato v4 define cores dentro de @theme usando nomes de variáveis com hífens, como '--color-primary-500: #3B82F6;'.
Segurança e privacidade
Tudo no navegador
Os dados inseridos são processados apenas no seu navegador e não são enviados para fora.
Processado apenas no navegador
Cálculo de paleta e geração de código é processado inteiramente no seu navegador, e os dados de entrada não são enviados para o servidor.
Comunicação criptografada com HTTPS
O carregamento da página também é criptografado por TLS, e o conteúdo não pode ser lido por terceiros.
Sem envio a terceiros
O conteúdo de entrada não é enviado para serviços externos como redes de publicidade ou rastreadores.
Sem salvamento automático de resultados
Cores e nomes de cores inseridos e sugestões de entrada não são armazenadas no servidor.
Siga RAKKOTOOLS na Busca do Google
187 ferramentas úteis ficam mais fáceis de encontrar na Busca do Google e na Busca por IA!
- Encontrado na busca
- Exibido também na busca por IA
- Descubra novas ferramentas
Informações de atualização
- update #318
Gerador de cores Tailwind adicionado: crie 11 tons de cores e código de configuração a partir de uma única cor