Инструменты › Tailwind-конвертер

Найди класс Tailwind
для любого цвета

Введи любой HEX-цвет и мгновенно найди ближайший класс Tailwind CSS. Кликни на любой цвет в палитре чтобы посмотреть его класс.

Введи цвет
—
—
Примеры использования
text- — копировать
bg- — копировать
border- — копировать
ring- — копировать
Ближайшие совпадения
Полная палитра Tailwind CSS

Как работает поиск

Алгоритм сравнивает твой цвет со всеми ~220 цветами палитры Tailwind CSS v3 и находит ближайший по евклидовому расстоянию в пространстве RGB. Результат — точное название класса.

Когда это нужно

Когда получаешь цвет от дизайнера в HEX и нужно быстро найти соответствующий Tailwind-класс. Или когда хочешь убедиться что твой цвет есть в стандартной палитре Tailwind.

Tailwind CSS v3

Инструмент использует полную палитру Tailwind CSS версии 3 — включая slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink и rose.

Часто задаваемые вопросы
Что делать если моего цвета нет в Tailwind?
Инструмент найдёт ближайший цвет. Если расхождение большое — можно добавить кастомный цвет в tailwind.config.js через секцию extend.colors, используя точный HEX который тебе нужен.
Поддерживается ли Tailwind v4?
Пока используется палитра Tailwind v3. В v4 система цветов изменилась, но базовые названия цветов остались совместимы.
Как использовать класс в проекте?
Например для синего цвета инструмент даст класс blue-500. Используй его как text-blue-500, bg-blue-500, border-blue-500 и т.д. — готовые примеры показаны в карточке слева.
Инструмент бесплатный?
Да, полностью бесплатно и без ограничений. Без регистрации, всё работает прямо в браузере.