Цвет HEX в класс Tailwind
Введите или выберите цвет бренда. Инструмент сравнит его с 242 цветами стандартной палитры Tailwind и покажет самые похожие вместе с готовым к копированию классом.
Как пользоватьсяКакой цвет Tailwind ближе всего
Доступно на: 
Цвет HEX в класс Tailwind: для чего нужен
Тот, кто работает с Tailwind CSS и получил цвет бренда в HEX, хочет знать, какой цвет стандартной палитры ближе всего, чтобы не засорять код значениями в скобках.
Инструмент сравнивает ваш цвет с 242 цветами палитры Tailwind 3 (от slate до rose, оттенки от 50 до 950, плюс белый и чёрный) по расстоянию в пространстве OKLab, которое следует восприятию глаза. Он показывает пять самых похожих с готовым классом и предупреждает, если ни один не достаточно близок.
Как пользоваться
- Вставьте цвет в HEX или rgb() либо выберите его в палитре.
- Выберите префикс класса (bg, text, border…).
- Скопируйте класс ближайшего цвета или точное значение.
Когда использовать
- Адаптировать цвет бренда к проекту на Tailwind.
- Перенести макет из Figma в классы.
- Решить, стоит ли добавлять новый цвет в тему.
Частые вопросы
Как выбирается ближайший цвет?
По расстоянию между цветами в пространстве OKLab, которое лучше отражает восприятие человеческого глаза, чем сравнение чисел RGB. Чем меньше расстояние, тем больше цвета похожи.
А если ни один не подходит?
Используйте точное значение в скобках, например bg-[#1f6feb], или добавьте цвет бренда в тему (theme.extend.colors в tailwind.config или @theme в Tailwind 4) под своим именем, например brand.
Палитра от Tailwind 3 или 4?
Сравнение использует значения HEX стандартной палитры Tailwind 3. В Tailwind 4 те же цвета заданы в OKLCH, с чуть более яркими оттенками, но названия (blue-600, red-500…) остались прежними.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.