Tailwind Color Finder

Що таке Tailwind Color Finder?

Tailwind CSS постачається зі стандартною кольоровою палітрою з 22 сімейств кольорів, кожне з яких містить 11 відтінків від 50 (найсвітліший) до 950 (найтемніший). Це дає 242 визначені кольори з назвами класів на кшталт bg-indigo-500 або text-red-400. Коли у вас є значення hex або RGB з файлу дизайну і потрібно знайти найближчий клас Tailwind, інструмент пошуку кольорів Tailwind обчислює відстань між вашим значенням та кожним кольором у палітрі і повертає найкращі збіги.

Процес пошуку збігів полягає в перетворенні вхідного кольору та кожного кольору Tailwind у триплети RGB, а потім в обчисленні евклідової відстані у тривимірному кольоровому просторі: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Колір Tailwind з найменшою відстанню є найближчим збігом. Якщо відстань дорівнює нулю, ваш вхідний колір точно відповідає одному зі стандартних відтінків Tailwind.

Це відрізняється від конвертера кольорів або інструменту пошуку назв кольорів. Конвертер змінює формати (hex на HSL, RGB на CMYK). Інструмент пошуку назв порівнює зі 148 іменованими кольорами CSS. Tailwind Color Finder порівнює зі стандартною палітрою Tailwind CSS і повертає назви класів, які можна одразу вставити у розмітку.

Навіщо використовувати цей Tailwind Color Finder?

Порівняти значення hex вручну з 242 відтінками Tailwind означає гортати документацію або конфігураційні файли. Цей інструмент виконує обчислення відстані для кожного відтінку і показує найкращі збіги, впорядковані за близькістю, разом із точними значеннями hex та назвами класів Tailwind, готовими для копіювання.

Випадки використання Tailwind Color Finder

Стандартна кольорова палітра Tailwind CSS

Tailwind CSS v3 включає 22 сімейства кольорів. Кожне сімейство має 11 відтінків: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 і 950. Відтінок 500 вважається базовим для кожного сімейства. У таблиці нижче перелічено кожне сімейство з найсвітлішим (50) та найтемнішим (950) hex-значеннями.

Tailwind v3 та v4: кольорова палітра

Tailwind CSS v4 змінює спосіб визначення кольорів, але зберігає ті самі назви стандартної палітри та номери відтінків.

Приклади коду

Знайдіть найближчий колір Tailwind програмним шляхом, використовуючи евклідову відстань у просторі RGB. Кожен приклад приймає рядок hex і повертає назву найближчого класу Tailwind зі стандартної палітри.

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

Часті запитання