Palette

Что такое Palette?

Palette — инструмент, который генерирует кастомную палитру Tailwind CSS из текстового запроса. Он предназначен для быстрого создания согласованных цветовых образцов для вашего UI вместо ручной работы.

Генератор поддерживает светлую и тёмную темы, включает нейтральные оттенки и предоставляет градации для ваших кастомных цветов — результат можно использовать напрямую в дизайн-системах на Tailwind.

Ключевые возможности

• Генерация палитр Tailwind из запроса, переводящая описание цвета в структурированные образцы.
• Поддержка светлой темы с набором цветов для стандартных (светлых) UI-контекстов.
• Поддержка тёмной темы с соответствующим набором цветов для тёмных UI-контекстов.
• Нейтральные оттенки, включая часто используемые градации серого/нейтральные тона в выходной палитре.
• Градации для кастомных цветов с несколькими уровнями интенсивности для покрытия состояний и иерархии UI.

Как использовать Palette

1. Введите запрос с описанием желаемых цветов (например, тема, настроение или конкретное цветовое направление).
2. Сгенерируйте палитру и просмотрите получившиеся образцы.
3. Используйте выходные данные светлой и тёмной тем в вашей настройке Tailwind.
4. Примените нейтральные оттенки и градации для согласованного стиля компонентов.

Сценарии использования

• Создание стартовой палитры Tailwind для нового проекта, когда визуальное направление известно, но не хочется вручную определять каждый оттенок.
• Построение вариантов светлой и тёмной тем для интерфейса путём генерации обоих режимов из одного запроса.
• Генерация нейтральных тонов вместе с брендовыми или акцентными цветами для поддержки фонов, границ и текста в дизайн-системе.
• Создание нескольких градаций для кастомных цветов, чтобы назначать цвета разным поверхностям и состояниям UI.
• Итерации над палитрой путём корректировки запроса для уточнения вида при сохранении структуры для Tailwind.

FAQ

Palette генерирует цвета для светлой и тёмной тем?

Да. Продукт поддерживает палитры светлой и тёмной тем.

Какой вывод предоставляет Palette?

Генерирует кастомную палитру Tailwind CSS, включая нейтральные оттенки и градации для ваших кастомных цветов.

Можно ли использовать Palette для дизайн-системы на Tailwind?

Да. Вывод описан как палитра Tailwind с градациями и нейтралами, что подходит для типичных рабочих процессов Tailwind.

Какие входные данные использует Palette?

Продукт генерирует палитры из запроса с описанием желаемого цветового направления.

Альтернативы

• Инструменты для цветовых палитр дизайн-систем: Помогают определять палитры, генерировать градации/оттенки и экспортировать цветовые токены для UI-фреймворков. Обычно требуют более прямого указания цветов, в отличие от запрос-ориентированного Palette.
• Ассистенты конфигурации Tailwind: Утилиты, фокусирующиеся на генерации или управлении цветами тем Tailwind. Могут акцентировать экспорт в tailwind.config и не центрироваться на генерации по запросу.
• Универсальные генераторы UI-тем: Создают токены тем (светлая/тёмная) и мапят их на компоненты. В сравнении с Palette могут выводить более широкие дизайн-токены помимо цветов Tailwind.
• Генераторы цветовых палитр (не для Tailwind): Создают цветовые схемы и градации из пользовательского ввода. Помогают исследовать эстетику, но маппинг на Tailwind обычно делается вручную.