Trouveur de Couleurs Tailwind

Qu'est-ce qu'un Trouveur de Couleurs Tailwind ?

Tailwind CSS est livré avec une palette de couleurs par défaut composée de 22 familles de couleurs, chacune contenant 11 teintes allant de 50 (la plus claire) à 950 (la plus foncée). Cela donne 242 couleurs prédéfinies avec des noms de classes comme bg-indigo-500 ou text-red-400. Lorsque vous disposez d'une valeur HEX ou RGB issue d'un fichier de maquette et que vous devez trouver la classe Tailwind la plus proche, un trouveur de couleurs Tailwind calcule la distance entre votre couleur et chaque couleur de la palette, puis retourne les meilleures correspondances.

Le processus de correspondance consiste à convertir votre couleur et chaque couleur Tailwind en triplets RGB, puis à calculer la distance euclidienne dans l'espace colorimétrique 3D : sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). La couleur Tailwind présentant la distance la plus faible est la correspondance la plus proche. Si la distance est nulle, votre couleur correspond exactement à une teinte par défaut de Tailwind.

Cet outil est différent d'un convertisseur de couleurs ou d'un chercheur de noms de couleurs CSS. Un convertisseur change les formats (HEX vers HSL, RGB vers CMYK). Un chercheur de noms CSS compare votre couleur aux 148 couleurs nommées en CSS. Un trouveur de couleurs Tailwind compare spécifiquement à la palette par défaut de Tailwind CSS, en renvoyant des noms de classes que vous pouvez coller directement dans votre balisage.

Pourquoi utiliser ce Trouveur de Couleurs Tailwind ?

Comparer manuellement une valeur HEX aux 242 teintes Tailwind implique de faire défiler la documentation ou des fichiers de configuration. Cet outil effectue le calcul de distance pour chaque teinte et affiche les meilleures correspondances classées par proximité, avec leurs valeurs HEX exactes et leurs noms de classes Tailwind prêts à copier.

Cas d'usage du Trouveur de Couleurs Tailwind

Palette de couleurs par défaut de Tailwind CSS

Tailwind CSS v3 comprend 22 familles de couleurs. Chaque famille dispose de 11 teintes : 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 et 950. La teinte 500 est considérée comme la teinte « de base » pour chaque famille. Le tableau ci-dessous liste chaque famille avec ses valeurs HEX les plus claires (50) et les plus foncées (950).

Palette de couleurs Tailwind v3 vs v4

Tailwind CSS v4 modifie la façon dont les couleurs sont définies, mais conserve les mêmes noms de palette par défaut et numéros de teintes.

Exemples de code

Trouvez la couleur Tailwind la plus proche par programmation en utilisant la distance euclidienne dans l'espace RGB. Chaque exemple prend une chaîne HEX et retourne le nom de classe Tailwind le plus proche de la palette par défaut.

// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)

import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)

# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

Questions fréquemment posées