HEX to Tailwind Converter

Ceci est un convertisseur HEX vers Tailwind. Il trouve la classe par défaut la plus proche (CIEDE2000). En v3, #3B82F6 est blue-500.

Exemples

Alternatives proches

Palette Tailwind complète

Convertir plusieurs couleurs d’un coup. Une par ligne, ou des virgules comme #3B82F6, #FF573380. Insérer l’exemple remplit trois lignes et le tableau en dessous.

HEX to Tailwind Converter

Ceci est un convertisseur HEX vers Tailwind : il trouve la classe par défaut la plus proche (CIEDE2000). En v3, #3B82F6 est blue-500.

Comment l’utiliser

  1. Collez un HEX, choisissez une couleur, Aléatoire, un exemple, ou (si le navigateur le permet) la pipette.
  2. Choisissez v4 ou v3. Lisez la classe la plus proche, son HEX et ΔE00.
  3. Copiez bg-, text-, border-, ring-, fill- ou une valeur arbitraire comme bg-[#1D9BF0].
  4. Si le meilleur ne convient pas, cliquez une alternative. La grille est la palette complète de la version choisie.
  5. Afficher l’exemple utilise #3B82F6. Copier le résultat copie la classe avec le préfixe. Le lot accepte HEX ou noms de classe.

Lire ΔE

ΔE ≤ 1 est la même couleur. ΔE ≤ 2 convient à l’UI. ΔE ≤ 5 aux fonds. Au-delà, utilisez bg-[#hex] pour garder la marque.

À noter

Palette par défaut uniquement (slate…rose, 50–950, noir et blanc). Pas de couleurs de thème perso. Le contraste WCAG est sur Color Converter. Lié : HEX to RGB.

Où l’utiliser

Transformer un HEX de maquette en classe, voir s’il existe un jumeau de marque, comparer v3 et v4.

Questions

v3 ou v4 ?

Les deux. La valeur par défaut est v4. Passez en v3 si le projet utilise encore l’ancienne palette HEX. Le même HEX peut tomber sur des classes différentes.

Et en cas d’égalité ?

Le plus petit ΔE gagne. À égalité, l’ordre de la palette.

Et si rien n’est assez proche ?

Copiez la valeur arbitraire, par exemple bg-[#1D9BF0].