Cercatore di Colori Tailwind

Cos'è un Cercatore di Colori Tailwind?

Tailwind CSS include una palette di colori predefinita con 22 famiglie di colori, ciascuna contenente 11 sfumature da 50 (la più chiara) a 950 (la più scura). Questo fornisce 242 colori predefiniti con nomi di classe come bg-indigo-500 o text-red-400. Quando hai un valore hex o RGB da un file di design e devi trovare la classe Tailwind più vicina, un cercatore di colori Tailwind calcola la distanza tra il tuo input e ogni colore della palette, restituendo le corrispondenze migliori.

Il processo di corrispondenza funziona convertendo sia il colore inserito che ogni colore Tailwind in triplette RGB, per poi calcolare la distanza euclidea nello spazio colore 3D: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Il colore Tailwind con la distanza minore è la corrispondenza più vicina. Se la distanza è zero, il tuo input corrisponde esattamente a una sfumatura predefinita di Tailwind.

Questo strumento è diverso da un convertitore di colori generico o da un cercatore di nomi CSS. Un convertitore cambia i formati (hex in HSL, RGB in CMYK). Un cercatore di nomi trova corrispondenze tra i 148 colori CSS con nome. Un cercatore di colori Tailwind confronta specificamente con la palette predefinita di Tailwind CSS, restituendo nomi di classe che puoi incollare direttamente nel tuo markup.

Perché Usare Questo Cercatore di Colori Tailwind?

Confrontare manualmente un valore hex con 242 sfumature Tailwind significa scorrere documentazione o file di configurazione. Questo strumento esegue il calcolo della distanza per ogni sfumatura e mostra le corrispondenze migliori ordinate per prossimità, con i valori hex esatti e i nomi delle classi Tailwind pronti da copiare.

Casi d'Uso del Cercatore di Colori Tailwind

Palette di Colori Predefinita di Tailwind CSS

Tailwind CSS v3 include 22 famiglie di colori. Ogni famiglia ha 11 sfumature: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e 950. La sfumatura 500 è considerata la 'base' di ogni famiglia. La tabella seguente elenca ogni famiglia con i valori hex più chiari (50) e più scuri (950).

Palette Colori Tailwind v3 vs v4

Tailwind CSS v4 cambia il modo in cui i colori sono definiti ma mantiene gli stessi nomi di palette predefiniti e numeri di sfumatura.

Esempi di Codice

Trova il colore Tailwind più vicino in modo programmatico usando la distanza euclidea nello spazio RGB. Ogni esempio riceve una stringa hex e restituisce il nome della classe Tailwind più vicina dalla palette predefinita.

// 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

Domande Frequenti