Инструменты › 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 и т.д. — готовые примеры показаны в карточке слева.
Инструмент бесплатный?
Да, полностью бесплатно и без ограничений. Без регистрации, всё работает прямо в браузере.

Другие инструменты

Цвет по фотоЗагрузи фото и кликни в любую точку — получи HEX, RGB, HSL и название Палитра из фотоИзвлекаем 5–8 доминирующих цветов из любого изображения Палитра для проектаПодбери N цветов с гарантированной читаемостью текста Сочетания цветовКомплементарные, аналоговые, триадные и сплит-комплементарные Вариации цветаСветлее, темнее, насыщеннее, бледнее, теплее, холоднее Генератор градиентовСоздавай красивые градиенты и копируй готовый CSS-код Контраст WCAGПроверка доступности AA и AAA — бесплатно Симулятор дальтонизмаКак цвета видят люди с протанопией, дейтеранопией и другими типами Конвертер цветовHEX ↔ RGB ↔ HSL ↔ CMYK мгновенно, с копированием кода Цвет по названиюНайди HEX по названию — «терракота», «индиго», «лазурный» CSS Filter для SVGПерекрась SVG-иконки в любой цвет через CSS без редактора Палитры цветовГотовые палитры по темам — клик по цвету копирует HEX