Tailwind Color Finder

Vad är ett Tailwind Color Finder?

Tailwind CSS levereras med en standardfärgpalett bestående av 22 färgfamiljer, var och en med 11 nyanser från 50 (ljusast) till 950 (mörkast). Det ger dig 242 fördefinierade färger med klassnamn som bg-indigo-500 eller text-red-400. När du har ett hex- eller RGB-värde från en designfil och behöver hitta närmaste Tailwind-klass beräknar ett Tailwind Color Finder avståndet mellan din inmatning och varje färg i paletten och returnerar de bästa träffarna.

Matchningsprocessen fungerar genom att konvertera både din inmatningsfärg och varje Tailwind-färg till RGB-triplar och sedan beräkna det euklidiska avståndet i det tredimensionella färgrymden: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Den Tailwind-färg med minst avstånd är den närmaste träffen. Om avståndet är noll mappar din inmatning exakt till en standardnyans i Tailwind.

Det här skiljer sig från ett allmänt färgkonverteringsverktyg eller ett CSS-färgnamnssökverktyg. En konverterare byter format (hex till HSL, RGB till CMYK). Ett namnssökverktyg matchar mot de 148 CSS-namngivna färgerna. Ett Tailwind Color Finder matchar specifikt mot Tailwinds standardpalett och returnerar klassnamn du kan klistra in direkt i din markup.

Varför använda detta Tailwind Color Finder?

Att manuellt jämföra ett hex-värde mot 242 Tailwind-nyanser innebär att bläddra igenom dokumentation eller konfigurationsfiler. Det här verktyget kör avståndsberäkningen för varje nyans och visar de bästa träffarna rankade efter närhet, med exakta hex-värden och Tailwind-klassnamn redo att kopiera.

Användningsområden för Tailwind Color Finder

Tailwind CSS standardfärgpalett

Tailwind CSS v3 innehåller 22 färgfamiljer. Varje familj har 11 nyanser: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 och 950. Nyansen 500 anses vara 'bas' för varje familj. Tabellen nedan listar varje familj med dess ljusaste (50) och mörkaste (950) hex-värde.

Tailwind v3 vs v4 — Färgpalett

Tailwind CSS v4 ändrar hur färger definieras men behåller samma standardpalettsnamn och nyanssnummer.

Kodexempel

Hitta närmaste Tailwind-färg programmatiskt med euklidiskt avstånd i RGB-rymden. Varje exempel tar en hex-sträng och returnerar närmaste Tailwind-klassnamn från standardpaletten.

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

Vanliga frågor