Tailwind Color Finder

Что такое Tailwind Color Finder?

Tailwind CSS поставляется со стандартной цветовой палитрой из 22 семейств цветов, каждое из которых содержит 11 оттенков от 50 (самый светлый) до 950 (самый тёмный). Это даёт 242 предопределённых цвета с именами классов вида bg-indigo-500 или text-red-400. Когда у вас есть HEX или RGB значение из дизайн-файла и нужно найти ближайший класс 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 считается «базовым» для каждого семейства. В таблице ниже перечислены все семейства с HEX значениями самого светлого (50) и самого тёмного (950) оттенков.

Сравнение цветовых палитр 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

Часто задаваемые вопросы