HEX to Tailwind Converter

Isto é um conversor de HEX para Tailwind. Encontra a classe predefinida mais próxima com CIEDE2000. Em v3, #3B82F6 é blue-500.

Exemplos

Alternativas próximas

Paleta Tailwind completa

Converte várias cores de uma vez. Uma por linha, ou vírgulas como #3B82F6, #FF573380. Inserir exemplo preenche três linhas e a tabela abaixo.

HEX to Tailwind Converter

Isto é um conversor de HEX para Tailwind: encontra a classe predefinida mais próxima com CIEDE2000. Em v3, #3B82F6 é blue-500.

Como usar

  1. Cole HEX, escolha uma cor, Aleatório, um exemplo ou (se o navegador permitir) o conta-gotas.
  2. Escolha v4 ou v3. Leia a classe mais próxima, o HEX e ΔE00.
  3. Copie bg-, text-, border-, ring-, fill- ou um valor arbitrário como bg-[#1D9BF0].
  4. Se o melhor não servir, clique numa alternativa. A grelha é a paleta completa da versão escolhida.
  5. Mostrar exemplo usa #3B82F6. Copiar resultado copia a classe com o prefixo. O lote aceita HEX ou nomes de classe.

Como ler ΔE

ΔE ≤ 1 é a mesma cor. ΔE ≤ 2 serve para UI. ΔE ≤ 5 para fundos. Acima disso, use bg-[#hex] para manter a cor da marca.

Observações

Só a paleta padrão (slate…rose, 50–950, preto e branco). Sem cores de tema próprias. Contraste WCAG está em Color Converter. Relacionado: HEX to RGB.

Onde usar

Passar um HEX de mockup para classe, ver se há um gémeo de marca, comparar v3 e v4.

Perguntas

É v3 ou v4?

Ambos. O padrão é v4. Use v3 se o projeto ainda usa a paleta HEX antiga. O mesmo HEX pode cair em classes diferentes.

E se empatar?

Ganha o ΔE menor. Se empatar, a ordem da paleta.

E se nada estiver perto?

Copie o valor arbitrário, por exemplo bg-[#1D9BF0].