Генератор цветов Tailwind
Генерируйте палитру из 11 оттенков (50–950) Tailwind CSS и код конфигурации из одного Hex-кода
Особенности
Автоматическая генерация 11 оттенков из одного цвета
Входной цвет устанавливается как 500, вычисляются оттенки от 50 до 950
Поддержка форматов v3 и v4
Переключайтесь между форматами config и @theme на вкладках
Копирование Hex-кодов по оттенкам
Кнопки для каждого цвета позволяют копировать коды цветов по одному
Обновление палитры в реальном времени
Без кнопки запуска — сравнивайте цвета по мере их выбора
Как использовать
Введите Hex-код базового цвета
Введите Hex-код или нажмите на образец цвета слева, чтобы открыть палитру цветов
При необходимости введите название цвета
Введите название цвета строчными буквами на английском языке. Если оставить пусто, будет использовано primary
Проверьте 11 образцов цвета
Просмотрите образцы цветов от 50 до 950 и их Hex-коды, скопируйте каждый цвет кнопкой на образце
Выберите формат вывода и скопируйте код
Выберите v3 или v4 и нажмите «Копировать код» для вставки в tailwind.config.js или CSS-файл
Варианты использования
Создание оттенков фирменного цвета
Создавайте согласованные оттенки для наведения на кнопку и фона из одного фирменного цвета
Добавление цветов, отсутствующих в стандартной палитре
Добавляйте собственные цвета проекта, которых нет в стандартной палитре Tailwind, в виде 11 оттенков в файл конфигурации
Создание конфигурации @theme для v4
Создавайте CSS-переменные Tailwind v4 на основе основного цвета сайта
Подготовка к реализации дизайн-макета
Подготовьте коды 11 оттенков для реализации из указанного в макете цвета и перенесите их в дизайн-инструмент
Основные сведения
Что означают 50–950 в Tailwind
Цвета Tailwind CSS представлены 11 ступенями (50–950), где 50 — самый светлый, 950 — самый тёмный, а 500 — базовый цвет. Числа используются в конце названий классов, например «bg-primary-500» или «text-primary-700».
- Ступени 50–300：Ступени 50–300 — это светлые цвета, часто используемые для фонов или лёгких заливок. На них хорошо читается тёмный текст сверху.
- Ступени 600–950：Ступени 600–950 — это тёмные цвета, часто используемые для наведения на кнопку или цвета текста заголовков. Хорошо видны на белом фоне.
Различия в способе определения цветов между v3 и v4
В Tailwind CSS v3 цвета определяются в JavaScript в tailwind.config.js, а в v4 — как CSS-переменные внутри @theme в CSS-файле. В обоих случаях определённые цвета используются с одинаковыми названиями классов, такими как «bg-primary-500».
- Способ записи v3：Способ записи v3 использует вложенную структуру в theme.extend.colors: «primary: { 500: '#3B82F6' }».
- Способ записи v4：Способ записи v4 использует переменные с дефисами внутри @theme: «--color-primary-500: #3B82F6;».
Безопасность и конфиденциальность
Полностью в браузере
Введённые данные обрабатываются только в вашем браузере и не отправляются за его пределы.
Обработка только в браузере
Расчёт палитры и создание кода выполняется полностью в вашем браузере, входные данные не отправляются на сервер.
Передача зашифрована с помощью HTTPS
Загрузка страницы также зашифрована с помощью TLS, содержание не может быть прочитано третьими лицами.
Отсутствует передача третьим лицам
Входные данные не отправляются внешним сервисам, таким как рекламные сети или трекеры.
Отсутствует автоматическое сохранение результатов
Введённые вами цвет и название цвета и предложения ввода не сохраняются на сервере.
Следите за RAKKOTOOLS в Google Поиске
187 удобных инструментов станут легче найти в Google Поиске и поиске AI!
- Найти в поиске
- Отображается в поиске AI
- Откройте новые инструменты
История обновлений
- update #318
Добавлен генератор цветов Tailwind, создание 11 оттенков и кода конфигурации из одного цвета
Рекомендуемые инструменты
187 бесплатных веб-инструментов доступны прямо сейчас!