← Все инструменты для текста

Генератор палитры Tailwind

Создайте шкалу цветов Tailwind CSS 50–950 из цвета вашего бренда для v3 или v4.

  • Бесплатно
  • Без регистрации
  • Работает на любом устройстве

Около Генератор палитры Tailwind

Введите свой фирменный цвет и получите полную шкалу от 50 до 950 в формате, который использует Tailwind, готовую для конфигурационного файла в v3 или переменных темы в v4. Светлые шаги подходят для фонов, 500 — примерно ваш базовый цвет, а самые тёмные шаги годятся для текста и тёмного режима.

Как пользоваться инструментом «Генератор палитры Tailwind»

  1. Введите цвет вашего бренда в виде кода HEX.
  2. Выберите вывод Tailwind v3 или v4.
  3. Скопируйте цветовую шкалу от 50 до 950 в вашу настройку Tailwind.

Чем полезен этот инструмент?

Другие названия

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

Куда вставлять сгенерированные цвета Tailwind?

В v3 добавьте их в theme.extend.colors в tailwind.config.js. В v4 вставьте переменные в блок @theme своего файла CSS.

Какой оттенок совпадёт с моим исходным цветом?

Ваш входной цвет помещается на шкалу в шаге, ближайшем к его светлоте, обычно около 500. Проверьте предпросмотр, чтобы увидеть, на какой номер он попал.

В чём разница между выводом v3 и v4?

Версия 3 помещает цвета в файл конфигурации, а версия 4 использует переменные темы CSS. Выберите ту, что соответствует версии Tailwind в вашем проекте.

Инструмент «Генератор палитры Tailwind» бесплатный?

Да. Инструмент «Генератор палитры Tailwind» на Toolipedia бесплатный: без регистрации и водяных знаков.

Это безопасно?

Да. Все вычисления выполняются в браузере, и ничего из введённого не отправляется на наш сервер.

Работает ли это на телефоне?

Да. Работает в любом современном браузере на Android и iPhone, а также на планшетах и компьютерах. Ничего не нужно устанавливать.

Нужна ли учётная запись?

Нет. Просто откройте страницу и пользуйтесь. Ни регистрации, ни электронной почты не нужно.

Можно ли разместить Генератор палитры Tailwind на моём сайте?

Да. Нажмите кнопку «Встроить на свой сайт» под инструментом, чтобы скопировать короткий фрагмент кода и вставить его на страницу. Это бесплатно, аккаунт не нужен, и инструмент продолжает работать внутри вашей страницы.

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