Wyszukiwarka Kolorów Tailwind

Czym jest wyszukiwarka kolorów Tailwind?

Tailwind CSS zawiera domyślną paletę kolorów złożoną z 22 rodzin, z których każda ma 11 odcieni — od 50 (najjaśniejszy) do 950 (najciemniejszy). Daje to 242 predefiniowane kolory z nazwami klas w stylu bg-indigo-500 lub text-red-400. Gdy masz wartość hex lub RGB z pliku projektu i chcesz znaleźć najbliższą klasę Tailwind, wyszukiwarka oblicza odległość między Twoim kolorem a każdym kolorem w palecie, a następnie zwraca najlepsze dopasowania.

Proces dopasowania polega na przekształceniu zarówno koloru wejściowego, jak i każdego koloru Tailwind na trójki RGB, a następnie obliczeniu odległości euklidesowej w trójwymiarowej przestrzeni kolorów: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Kolor Tailwind z najmniejszą odległością jest najbliższym dopasowaniem. Jeśli odległość wynosi zero, Twój kolor dokładnie odpowiada domyślnemu odcieniowi Tailwind.

Różni się to od ogólnego konwertera kolorów czy wyszukiwarki nazw kolorów. Konwerter zmienia formaty (hex na HSL, RGB na CMYK). Wyszukiwarka nazw dopasowuje do 148 nazwanych kolorów CSS. Wyszukiwarka kolorów Tailwind dopasowuje specyficznie do domyślnej palety Tailwind CSS, zwracając nazwy klas, które możesz wkleić bezpośrednio do swojego kodu.

Dlaczego warto używać tej wyszukiwarki kolorów Tailwind?

Ręczne porównywanie wartości hex z 242 odcieniami Tailwind oznacza przewijanie dokumentacji lub plików konfiguracyjnych. To narzędzie oblicza odległość dla każdego odcienia i wyświetla najlepsze dopasowania posortowane według bliskości, wraz z dokładnymi wartościami hex i nazwami klas Tailwind gotowymi do skopiowania.

Przypadki użycia wyszukiwarki kolorów Tailwind

Domyślna paleta kolorów Tailwind CSS

Tailwind CSS v3 zawiera 22 rodziny kolorów. Każda rodzina ma 11 odcieni: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 i 950. Odcień 500 jest uważany za bazowy dla każdej rodziny. Poniższa tabela zawiera każdą rodzinę z jej najjaśniejszą (50) i najciemniejszą (950) wartością hex.

Paleta kolorów Tailwind v3 vs v4

Tailwind CSS v4 zmienia sposób definiowania kolorów, ale zachowuje te same domyślne nazwy palety i numery odcieni.

Przykłady kodu

Znajdź najbliższy kolor Tailwind programistycznie, używając odległości euklidesowej w przestrzeni RGB. Każdy przykład przyjmuje ciąg znaków hex i zwraca najbliższą nazwę klasy Tailwind z domyślnej palety.

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

Często zadawane pytania