Что такое Tailwind CSS и почему важны цвета?

Tailwind CSS — это utility‑first CSS‑фреймворк, предоставляющий обширный набор предопределённых классов цветов. Вместо написания собственного CSS, например background-color: #3b82f6, разработчики используют утилитарные классы вроде bg-blue-500. Такой подход обеспечивает согласованность дизайна, ускоряет разработку и упрощает поддержку цветовых схем в больших проектах.

Палитра цветов Tailwind включает 22 семейства цветов (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) с 11 оттенками каждый (50‑950), всего более 240 тщательно продуманных цветов, разработанных для гармоничной совместной работы.

Как работают преобразования цветов?

Преобразование цвета между форматами подразумевает математические трансформации. HEX‑цвета представляют значения RGB в шестнадцатеричной нотации (#RRGGBB), тогда как RGB использует десятичные значения (0‑255) для каналов красного, зелёного и синего. При конвертации пользовательского цвета в Tailwind инструмент вычисляет «цветовое расстояние» с помощью формулы евклидова расстояния в цветовом пространстве RGB, находя цвет Tailwind с наименьшей перцептивной разницей от вашего ввода.

Описание инструмента

Tailwind Color Converter — это двунаправленный инструмент конвертации, который соединяет классы цветов Tailwind CSS и стандартные цветовые форматы. Он работает в двух режимах: преобразование цветов Tailwind в значения HEX/RGB или поиск ближайшего соответствия Tailwind для любого пользовательского цвета. Это устраняет догадки при интеграции фирменных цветов в проекты на Tailwind или извлечении точных цветовых значений из классов Tailwind.

Примеры

Tailwind → Цвет:

  • Ввод: blue-500 → Вывод: #3b82f6, rgb(59, 130, 246)
  • Ввод: emerald-700 → Вывод: #047857, rgb(4, 120, 87)
  • Ввод: rose-400 → Вывод: #fb7185, rgb(251, 113, 133)

Цвет → Tailwind:

  • Ввод: #ef4444 → Вывод: red-500 (точное совпадение)
  • Ввод: #5271ff → Вывод: indigo-500 (ближайшее совпадение, расстояние: 12.45)
  • Ввод: rgb(34, 197, 94) → Вывод: green-500 (точное совпадение)

Возможности

  • Двунаправленная конвертация: Преобразование из Tailwind в цветовые коды или поиск соответствий Tailwind для любого цвета
  • Полная палитра Tailwind: Доступ ко всем 22 семействам цветов и 11 уровням оттенков (50‑950)
  • Поддержка нескольких форматов ввода: HEX, RGB и OKLCH
  • Вычисление цветового расстояния: Показ того, насколько ваш цвет близок к предложенному цвету Tailwind
  • Мгновенный вывод CSS: Получение готовых к использованию имён классов (bg-blue-500) и CSS‑переменных (--color-blue-500)

Сценарии использования

  • Интеграция фирменных цветов: Поиск ближайших цветов Tailwind, соответствующих руководствам вашего бренда, без создания пользовательских конфигураций цветов
  • Передача дизайна: Конвертация значений цветов из Figma/Sketch в классы Tailwind для ускорения реализации
  • Миграция наследуемого кода: При рефакторинге CSS в Tailwind быстро определить, какие утилитарные классы заменят существующие цветовые значения
  • Извлечение цветов: Получение точных значений HEX и RGB из классов Tailwind для использования в не‑Tailwind контекстах, например в email‑шаблонах или внешних инструментах
  • Аудит доступности: Извлечение точных цветовых значений из классов Tailwind для проверки контрастности в соответствии со стандартами WCAG