Генератор кольорів Tailwind
Генерує палітру з 11 відтінків (50–950) Tailwind CSS та код конфігурації з одного Hex-коду
Можливості
Автоматична генерація 11 відтінків з одного кольору
Розраховує оттінки від 50 до 950, беручи введений колір за 500
Підтримка форматів v3 і v4
Переключайтеся між форматами config і @theme на вкладках
Копіювання Hex за відтінками
Копіюйте коди кольорів по одному за допомогою кнопок для кожного зразка
Оновлення палітри під час введення
Порівнюйте кольори на льоту без кнопки запуску
Як користуватися
Введіть Hex базового кольору
Введіть Hex-код або натисніть на кольоровий зразок ліворуч, щоб відкрити палітру
За необхідності введіть назву кольору
Введіть назву кольору латиницею в нижньому регістрі. Якщо порожньо, буде використано primary
Переглядайте зразки 11 відтінків
Переглядайте зразки та Hex-коди від 50 до 950, копіюйте кожен окремо через кнопку зразка
Виберіть формат та скопіюйте код
Виберіть v3 або v4 і натисніть «Копіювати код» для вставлення у tailwind.config.js або CSS-файл
Випадки використання
Створення оттінків фірмового кольору
Створіть узгоджені оттінки для наведення на кнопки та фонів, виходячи з одного фірмового кольору
Додавання кольорів, яких немає в стандартній палітрі
Додавайте унікальні для проекту кольори з 11 відтінками в файл конфігурації
Створення конфігурації @theme для v4
Напишіть CSS-змінні Tailwind v4 з нуля на основі основного кольору сайту
Підготовка до реалізації макету
Підготуйте код з 11 відтінками для кольорів макету, перенесіть у дизайн-інструмент
Базові знання
Що означають 50–950 в Tailwind
Кольори в Tailwind CSS представляються 11 рівнями від 50 (найсвітліший) до 950 (найтемніший), причому 500 є базовим відтінком кольору. Числа використовуються як суфікс в назвах класів, наприклад «bg-primary-500» або «text-primary-700».
- Рівні 50–300：Рівні 50–300 — це світлі кольори, які часто використовуються для фонів та світлих заливок. На них легко читається темний текст.
- Рівні 600–950：Рівні 600–950 — це темні кольори, які часто використовуються для наведення на кнопки та кольорів заголовків. Вони чітко видно на світлих фонах.
Різниця у способах визначення кольорів v3 і v4
В Tailwind CSS v3 кольори визначаються у файлі tailwind.config.js через JavaScript, а в 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 відтінків із 1 кольору та коду конфігурації
Рекомендовані інструменти
187 веб-інструментів доступні безкоштовно прямо зараз!