HEX to Tailwind Converter

Questo è un convertitore da HEX a Tailwind. Trova la classe predefinita più vicina con CIEDE2000. In v3 #3B82F6 è blue-500.

Esempi

Alternative vicine

Palette Tailwind completa

Converte più colori insieme. Uno per riga, oppure virgole come #3B82F6, #FF573380. Inserisci esempio carica tre righe e la tabella sotto.

HEX to Tailwind Converter

Questo è un convertitore da HEX a Tailwind: trova la classe predefinita più vicina con CIEDE2000. In v3 #3B82F6 è blue-500.

Come si usa

  1. Incolla HEX, scegli un colore, Casuale, uno swatch di esempio o (se il browser lo consente) il contagocce.
  2. Scegli v4 o v3. Leggi la classe più vicina, il suo HEX e ΔE00.
  3. Copia bg-, text-, border-, ring-, fill- o un valore arbitrario come bg-[#1D9BF0].
  4. Se il migliore non va, clicca un’alternativa. La griglia è la palette completa della versione scelta.
  5. Mostra esempio usa #3B82F6. Copia risultato copia la classe con il prefisso. Il batch accetta HEX o nomi di classe.

Come leggere ΔE

ΔE ≤ 1 è lo stesso colore. ΔE ≤ 2 va bene per la UI. ΔE ≤ 5 per gli sfondi. Oltre, usa bg-[#hex] per tenere il colore esatto.

Note

Solo la palette predefinita (slate…rose, 50–950, nero e bianco). Niente colori di tema personalizzati. Il contrasto WCAG è su Color Converter. Correlato: HEX to RGB.

Dove usarlo

Trasformare un HEX del mockup in una classe, vedere se c’è un gemello di marca, confrontare v3 e v4.

Domande

È v3 o v4?

Entrambi. L’impostazione predefinita è v4. Usa v3 se il progetto ha ancora la palette HEX. Lo stesso HEX può cadere su classi diverse.

E se due classi sono ugualmente vicine?

Vince il ΔE minore. A parità, l’ordine della palette.

E se niente è abbastanza vicino?

Copia il valore arbitrario, ad esempio bg-[#1D9BF0].