HEX to Tailwind Converter

Это конвертер HEX в Tailwind. Ищет ближайший класс палитры по CIEDE2000. В v3 #3B82F6 — blue-500.

Примеры

Близкие варианты

Полная палитра Tailwind

Несколько цветов сразу. По одному в строке или через запятую: #3B82F6, #FF573380. «Подставить пример» вставит три строки и таблицу ниже.

HEX to Tailwind Converter

Это конвертер HEX в Tailwind: ищет ближайший класс палитры по CIEDE2000. В v3 #3B82F6 — blue-500.

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

  1. Вставьте HEX, выберите цвет, Случайный, пример или (если браузер умеет) пипетку с экрана.
  2. Выберите v4 или v3. Смотрите ближайший класс, HEX и ΔE00.
  3. Копируйте bg-, text-, border-, ring-, fill- или произвольное значение вроде bg-[#1D9BF0].
  4. Если лучший вариант не подходит — кликните альтернативу. Сетка — полная палитра выбранной версии.
  5. Пример использует #3B82F6. Копирование результата копирует класс с префиксом. Пакет принимает HEX или имена классов.

Как читать ΔE

ΔE ≤ 1 — фактически тот же цвет. ΔE ≤ 2 подходит для UI. ΔE ≤ 5 — для фонов. Выше — используйте bg-[#hex], чтобы сохранить точный цвет бренда.

Важно знать

Только стандартная палитра (slate…rose, 50–950, чёрный и белый). Свои цвета темы не входят. Контраст WCAG — на Color Converter. Связанное: HEX to RGB.

Где пригодится

Перевести HEX из макета в класс, проверить, есть ли близнец бренда, сравнить v3 и v4 перед обновлением.

Вопросы

Это v3 или v4?

Оба. По умолчанию v4. Если проект ещё на старой HEX-палитре — переключите на v3. Один и тот же HEX может попасть в разные классы.

Если два класса одинаково близки?

Побеждает меньший ΔE. При равенстве — порядок палитры.

Если ничего не близко?

Скопируйте произвольное значение, например bg-[#1D9BF0].