Генератор палитры Tailwind: 11-шаговая шкала
Сгенерируйте 11-шаговую цветовую шкалу в стиле Tailwind, от 50 до 950, используя один базовый цвет. Палитра наращивает светлоту в OKLch — перцептивно равномерном цветовом пространстве, которое использует Tailwind v3. Проверьте сгенерированные оттенки, кликните по любому значению, чтобы скопировать его, или используйте включённый готовый фрагмент конфига Tailwind для вставки. Перед генерацией задайте доступные опции.
Генератор палитры Tailwind создаёт 11-шаговую цветовую шкалу в стиле Tailwind из одного базового цвета. Он генерирует оттенки с номерами 50, 100 и далее до 950, что облегчает построение согласованной палитры вместо создания каждого значения вручную. Каждый оттенок копируется кликом, а инструмент включает готовый фрагмент конфига Tailwind для вставки.
Генератор строит шкалу, наращивая светлоту в OKLch — перцептивно равномерном цветовом пространстве, которое использует Tailwind v3. Задайте доступные опции, укажите базовый цвет и сгенерируйте палитру, чтобы увидеть получившиеся оттенки. Затем вы можете скопировать отдельное значение или использовать включённый фрагмент конфига.
Палитра — это последовательность связанных значений цвета, а фрагмент конфига Tailwind — удобный способ использовать сгенерированную палитру в проекте Tailwind. Создание оттенков из одного базового цвета помогает установить согласованный диапазон более светлых и тёмных значений для вашего интерфейса или данных проекта. Нумерация 50–950 облегчает идентификацию шагов при работе со шкалой.
Инструмент работает полностью в вашем браузере, а ваш ввод обрабатывается на вашем устройстве, а не отправляется на сервер. У него нет зависимости от сервера, поэтому после загрузки страницы он продолжает работать офлайн. Генератор палитры Tailwind бесплатен и поможет разработчикам, дизайнерам и DevOps-инженерам быстро создать и скопировать полную цветовую шкалу.
Шаг 1: Укажите один базовый цвет для начала палитры. Генератор использует его для построения полной 11-шаговой шкалы.
Шаг 2: Перед генерацией задайте доступные опции. Конкретные опции можно проверить в инструменте.
Шаг 3: Сгенерируйте палитру и проверьте её оттенки, пронумерованные от 50 до 950.
Шаг 4: Кликните по оттенку, чтобы скопировать его значение, или скопируйте включённый готовый фрагмент конфига Tailwind для вставки.
Пример использования: Создайте полный набор оттенков в стиле Tailwind для дизайн-системы из одного базового цвета.
Пример использования: Подготовьте значения цвета для тестов, фикстур или сид-данных, не вводя каждый оттенок вручную.
Пример использования: Сгенерируйте сразу всю шкалу 50–950 вместо придумывания значений по одному.
Пример использования: Постройте палитру для проекта и копируйте значения отдельных оттенков по мере необходимости.
Пример использования: Используйте включённый фрагмент конфига, чтобы перенести сгенерированную палитру в конфигурацию Tailwind.
Пример использования: Исследуйте, как меняется светлота по палитре, используя шкалу на основе OKLch.