Что такое Поиск цветов Tailwind?

Tailwind Color Finder принимает любое значение цвета — hex, rgb(), hsl() или имя из CSS вроде teal — и мгновенно выдаёт ближайший утилитный класс Tailwind CSS. Не нужно сравнивать палитры на глаз: вставьте значение из дизайн-инструмента и получите точное имя класса, готовое к использованию в коде.

Сопоставление работает по перцептивному расстоянию ΔE в пространстве CIE Lab, а не вычитанием RGB, поэтому результат ближе к тому, что глаз действительно считает похожим, а не к числовому минимуму. Перебирается вся стандартная палитра Tailwind v3/v4, все семейства от slate до rose, оттенки 50–950, плюс чёрный и белый. Десять лучших совпадений выводятся со значениями расстояний.

Как использовать

1. Введите HEX-код цвета из дизайн-макета или выберите цвет с помощью палитры.
2. Инструмент мгновенно покажет ближайший класс цвета Tailwind CSS с визуальным сравнением бок о бок.
3. Скопируйте имя класса Tailwind (например, bg-blue-500) прямо в код. Оцените расстояние между цветами, чтобы понять точность совпадения.

Когда использовать

• Перевести брендовые hex-коды или цвета из Figma в классы Tailwind на новом проекте.
• Разобрать старый стиль с захардкоженными hex и перенести его на утилитарные классы.
• Выбрать семантически нужный оттенок (red-500 против rose-500), когда дизайнер прислал один hex.

Результат

Дизайнер передал вам фирменный цвет #2563EB. Вставьте его — инструмент покажет точное совпадение с blue-500. Для #3A7BC8 ближайшим совпадением будет sky-600 с показателем расстояния, отражающим степень близости.

Частые вопросы

Как инструмент решает, какой цвет Tailwind ближе всего?

Оба hex переводятся в CIE Lab, после чего считается ΔE76 — перцептивное расстояние, близкое к тому, как глаз воспринимает разницу. ΔE меньше 1 практически неразличимо; больше 5 — оттенок или яркость заметно меняются.

Какая версия палитры Tailwind используется?

Стандартная палитра v3/v4: 22 семейства (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), оттенки 50–950, плюс чёрный и белый. Кастомные цвета темы не входят.

Почему мой hex попадает в неожиданный оттенок?

Расстояние Lab учитывает оттенок, насыщенность и яркость вместе. Приглушённый зелёный может оказаться ближе к slate, чем к насыщенному teal, потому что разница в яркости перевешивает. Если первый вариант не нравится, посмотрите всю десятку и выберите по семейству оттенка.

Можно скопировать результат как CSS-переменную, а не класс Tailwind?

В панели подробностей показываются и имя класса (bg-blue-500), и hex. Скопируйте hex и заверните его в var(--brand), если работаете с пользовательскими свойствами CSS вместо утилит. А если в палитре нет достаточно близкого цвета, инструмент покажет класс с произвольным значением (bg-[#hex]) на основе вашего точного цвета — точность сохраняется без правки темы.

Можно вставить rgb(), hsl() или CSS-имя цвета вместо hex?

Да. Поле распознаёт hex (#2563EB или 2563EB, 3 или 6 знаков), rgb()/rgba(), hsl()/hsla() с градусами либо без единиц у тона, а также весь набор именованных CSS-цветов (teal, rebeccapurple, cornflowerblue и так далее). Альфа-канал игнорируется — сопоставление идёт по непрозрачному RGB-эквиваленту.

Похожие инструменты