Tailwind Color Finder

Wat is een Tailwind Color Finder?

Tailwind CSS wordt geleverd met een standaardkleurenpalet van 22 kleurenfamilies, elk met 11 tinten van 50 (lichtst) tot 950 (donkerst). Dat geeft je 242 voorgedefinieerde kleuren met klassenamen zoals bg-indigo-500 of text-red-400. Als je een hex- of RGB-waarde hebt uit een ontwerpprogramma en de dichtstbijzijnde Tailwind-klasse wilt vinden, berekent een Tailwind color finder de afstand tussen je invoer en elke kleur in het palet, en geeft vervolgens de beste overeenkomsten terug.

Het vergelijkingsproces werkt door zowel je invoerkleur als elke Tailwind-kleur om te zetten naar RGB-tripletten en vervolgens de Euclidische afstand te berekenen in de driedimensionale kleurruimte: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). De Tailwind-kleur met de kleinste afstand is de beste overeenkomst. Als de afstand nul is, komt je invoer exact overeen met een standaard Tailwind-tint.

Dit verschilt van een algemene kleurconverter of een naam-zoektool voor kleuren. Een converter verandert formaten (hex naar HSL, RGB naar CMYK). Een naam-zoektool vergelijkt met de 148 CSS-namedcolors. Een Tailwind color finder vergelijkt specifiek met het standaardpalet van Tailwind CSS en geeft klassenamen terug die je direct in je markup kunt plakken.

Waarom deze Tailwind Color Finder gebruiken?

Een hex-waarde handmatig vergelijken met 242 Tailwind-tinten betekent scrollen door documentatie of configuratiebestanden. Dit hulpmiddel voert de afstandsberekening uit voor elke tint en toont de beste overeenkomsten gerangschikt op nabijheid, met exacte hex-waarden en Tailwind-klassenamen klaar om te kopiëren.

Gebruiksscenario's voor de Tailwind Color Finder

Standaardkleurenpalet van Tailwind CSS

Tailwind CSS v3 bevat 22 kleurenfamilies. Elke familie heeft 11 tinten: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 en 950. De tint 500 wordt beschouwd als de 'basis' van elke familie. De onderstaande tabel geeft elke familie weer met de lichtste (50) en donkerste (950) hex-waarden.

Tailwind v3 vs v4 kleurenpalet

Tailwind CSS v4 verandert de manier waarop kleuren worden gedefinieerd, maar behoudt dezelfde standaardpaletnamen en tintnummers.

Codevoorbeelden

Zoek de dichtstbijzijnde Tailwind-kleur programmatisch op met behulp van Euclidische afstand in RGB-ruimte. Elk voorbeeld neemt een hex-string en geeft de dichtstbijzijnde Tailwind-klassenaam terug uit het standaardpalet.

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

Veelgestelde vragen