Что такое 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