Tailwind Color Finder

Was ist ein Tailwind Color Finder?

Tailwind CSS wird mit einer Standard-Farbpalette aus 22 Farbfamilien ausgeliefert, die jeweils 11 Abstufungen von 50 (hellste) bis 950 (dunkelste) enthalten. Das ergibt 242 vordefinierte Farben mit Klassennamen wie bg-indigo-500 oder text-red-400. Wenn Sie einen HEX- oder RGB-Wert aus einer Design-Datei haben und die nächste Tailwind-Klasse finden möchten, berechnet ein Tailwind Color Finder den Abstand zwischen Ihrer Eingabe und jeder Farbe in der Palette und gibt die besten Treffer zurück.

Der Abgleichsprozess funktioniert, indem sowohl Ihre Eingabefarbe als auch jede Tailwind-Farbe in RGB-Tripel umgewandelt werden und anschließend der euklidische Abstand im dreidimensionalen Farbraum berechnet wird: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Die Tailwind-Farbe mit dem kleinsten Abstand ist der nächste Treffer. Ist der Abstand null, entspricht Ihre Eingabe exakt einer Tailwind-Standardabstufung.

Das unterscheidet sich von einem allgemeinen Farbkonverter oder Farbnamen-Finder. Ein Konverter ändert Formate (HEX nach HSL, RGB nach CMYK). Ein Farbnamen-Finder gleicht gegen die 148 benannten CSS-Farben ab. Ein Tailwind Color Finder gleicht gezielt gegen die Tailwind CSS Standard-Palette ab und gibt Klassennamen zurück, die du direkt in dein Markup einfügen kannst.

Warum diesen Tailwind Color Finder verwenden?

Einen HEX-Wert manuell mit 242 Tailwind-Abstufungen zu vergleichen bedeutet, durch Dokumentation oder Konfigurationsdateien zu scrollen. Dieses Tool führt die Abstandsberechnung für jede Abstufung durch und zeigt die besten Treffer nach Nähe sortiert – mit den genauen HEX-Werten und Tailwind-Klassennamen zum Kopieren.

Anwendungsfälle für den Tailwind Color Finder

Tailwind CSS Standard-Farbpalette

Tailwind CSS v3 enthält 22 Farbfamilien. Jede Familie hat 11 Abstufungen: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 und 950. Die Abstufung 500 gilt als „Basis“ jeder Familie. Die Tabelle unten listet jede Familie mit ihrem hellsten (50) und dunkelsten (950) HEX-Wert auf.

Tailwind v3 vs. v4 Farbpalette

Tailwind CSS v4 ändert die Art, wie Farben definiert werden, behält aber dieselben Standard-Palettennamen und Abstufungsnummern bei.

Code-Beispiele

Die nächstgelegene Tailwind-Farbe programmgesteuert über den euklidischen Abstand im RGB-Farbraum finden. Jedes Beispiel nimmt einen HEX-String entgegen und gibt den nächsten Tailwind-Klassennamen aus der Standard-Palette zurück.

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

Häufig gestellte Fragen