Генератор UI темы

Генерируйте полноценные палитры для интерфейсов: акцентные цвета, фоновые, текстовые, обводочные и вспомогательные

Ввод базового цвета

Base Color (HEX, RGB, or HSL)

Theme Mode

Theme Presets

Extract Color from Image (Optional)

Превью темы

Theme Preview

Card Title

This is a sample card component demonstrating the theme colors.

Form Example

Password

Success

Warning

Error

Info

Цветовые токены

Color Tokens

Primary

Token	Value	Action
Copy #3B82F6 primary	#3B82F6
Copy #6DA2F8 primary-hover	#6DA2F8
Copy #0B64F4 primary-active	#0B64F4
Copy #000000 primary-foreground	#000000

Secondary

Token	Value	Action
Copy #295BAC secondary	#295BAC
Copy #2E67C2 secondary-hover	#2E67C2
Copy #FFFFFF secondary-foreground	#FFFFFF

Neutral

Token	Value	Action
Copy #0A0A0A background	#0A0A0A
Copy #FFFFFF foreground	#FFFFFF
Copy #1A1A1A card	#1A1A1A
Copy #2A2A2A muted	#2A2A2A

Status

Token	Value	Action
Copy #00FF00 success	#00FF00
Copy #FFBF00 warning	#FFBF00
Copy #FF0000 error	#FF0000
Copy #00AAFF info	#00AAFF

Borders

Token	Value	Action
Copy #2A2A2A border	#2A2A2A
Copy #404040 border-strong	#404040
Copy #3B82F6 ring	#3B82F6

Shadows

Token	Value	Action
Copy rgba(0, 0, 0, 0.3) shadow-sm	rgba(0, 0, 0, 0.3)
Copy rgba(0, 0, 0, 0.4) shadow-md	rgba(0, 0, 0, 0.4)
Copy rgba(0, 0, 0, 0.5) shadow-lg	rgba(0, 0, 0, 0.5)

Контрастность

Contrast Analysis

Color Pair	Contrast Ratio	WCAG Compliance	Recommendation
vs	5.71:1	✓ AA	✓ Good contrast
vs	6.59:1	✓ AA	✓ Good contrast
vs	19.80:1	✓ AA✓ AAA	✓ Good contrast
vs	1.14:1	✗ Below AA	Increase card contrast for better visibility

Экспорт

Export

:root {
  /* Primary Colors */
  --color-primary: #3B82F6;
  --color-primary-hover: #6DA2F8;
  --color-primary-active: #0B64F4;
  --color-primary-foreground: #000000;

  /* Secondary Colors */
  --color-secondary: #295BAC;
  --color-secondary-hover: #2E67C2;
  --color-secondary-foreground: #FFFFFF;

  /* Neutral Colors */
  --color-background: #0A0A0A;
  --color-foreground: #FFFFFF;
  --color-card: #1A1A1A;
  --color-muted: #2A2A2A;

  /* Status Colors */
  --color-success: #00FF00;
  --color-warning: #FFBF00;
  --color-error: #FF0000;
  --color-info: #00AAFF;

  /* Borders */
  --color-border: #2A2A2A;
  --color-border-strong: #404040;
  --color-ring: #3B82F6;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.3);
  --shadow-md: rgba(0, 0, 0, 0.4);
  --shadow-lg: rgba(0, 0, 0, 0.5);
}

Полная инструкция по использованию генератора UI темы

UI Theme Generator — это инструмент для генерации полноценных цветовых палитр для интерфейсов. Он создает акцентные цвета, фоновые, текстовые, обводочные и вспомогательные цвета на основе одного базового цвета.

Шаг 1: Выбор базового цвета

Выберите основной цвет с помощью цветового пикера, введите HEX/RGB/HSL вручную, выберите готовую тему из списка (Light, Dark, Vibrant, Pastel, Minimal, Corporate) или загрузите изображение для извлечения доминирующего цвета.

Шаг 2: Настройка режима

Выберите режим темы: Light (светлая), Dark (темная) или Auto (автоматическое определение на основе базового цвета).

Шаг 3: Просмотр превью

Просмотрите превью темы на реальных UI-компонентах: кнопки, текстовые блоки, карточка, форма, панель навигации. Это позволит увидеть тему в действии.

Шаг 4: Изучение токенов

Изучите все сгенерированные цветовые токены, разделенные по категориям: Primary (основные), Secondary (вторичные), Neutral (нейтральные), Status (статусные), Borders (границы), Shadows (тени).

Шаг 5: Проверка контрастности

Проверьте автоматический анализ контрастности для ключевых пар цветов: primary vs primary-foreground, secondary vs secondary-foreground, text vs background, card vs фон. Убедитесь в соответствии WCAG AA/AAA стандартам.

Шаг 6: Экспорт

Экспортируйте тему в различных форматах: CSS Variables (для прямого использования в CSS), Tailwind config (для интеграции с Tailwind CSS), JSON tokens (для дизайн-систем), Figma Tokens (для использования в Figma). Используйте кнопку 'Export All' для экспорта всех форматов сразу.

Как использовать UI Theme Generator: пошаговое руководство

Как выбрать базовый цвет

Используйте цветовой пикер для визуального выбора, введите цвет вручную в любом формате (HEX, RGB, HSL), выберите готовую тему из выпадающего списка или загрузите изображение для автоматического извлечения доминирующего цвета.

Как настроить режим темы

Выберите Light для светлой темы, Dark для темной или Auto для автоматического определения на основе яркости базового цвета. Режим влияет на генерацию нейтральных цветов и теней.

Как использовать превью темы

Превью показывает тему на реальных UI-компонентах: кнопки с состояниями hover/active, текстовые блоки, карточки, формы, панель навигации. Это помогает визуально оценить тему перед использованием.

Как работать с токенами

Все токены организованы по категориям. Каждый токен показывает цветовой свотч, HEX значение и кнопку копирования. Токены готовы для использования в вашем проекте.

Как интерпретировать анализ контрастности

Таблица контрастности показывает соотношение для ключевых пар цветов. Зеленые метки (✓ AA, ✓ AAA) означают соответствие стандартам. Красные метки (✗ Below AA) требуют улучшения контраста.

Как экспортировать тему

Выберите нужный формат экспорта (CSS Variables, Tailwind Config, JSON Tokens, Figma Tokens), скопируйте код или скачайте файл. Используйте 'Export All' для получения всех форматов сразу.

Часто задаваемые вопросы о UI Theme Generator

Что такое UI токены?

UI токены — это именованные цветовые значения, используемые в дизайн-системах. Они обеспечивают консистентность цветов в интерфейсе и упрощают поддержку темы. Примеры: primary, secondary, background, foreground.

Как работает генерация токенов?

Генератор использует базовый цвет и создает вариации через осветление/затемнение (для hover/active состояний), смешивание с нейтральными цветами (для secondary), и автоматический подбор контрастных цветов (для foreground). Статусные цвета генерируются путем корректировки оттенка.

Что такое режим Auto?

Режим Auto автоматически определяет, должна ли тема быть светлой или темной, на основе яркости базового цвета. Если базовый цвет светлый (luma >= 0.5), выбирается светлая тема, иначе — темная.

Как использовать экспортированные токены?

CSS Variables можно использовать напрямую в CSS: var(--color-primary). Tailwind config нужно добавить в tailwind.config.js. JSON tokens подходят для интеграции в дизайн-системы. Figma Tokens можно импортировать в Figma через плагин.

Почему некоторые пары цветов не проходят проверку контрастности?

Если базовый цвет слишком светлый или темный, автоматически сгенерированные foreground цвета могут не обеспечивать достаточный контраст. В этом случае рекомендуется выбрать другой базовый цвет или вручную настроить foreground цвета.

Можно ли редактировать токены вручную?

В текущей версии токены генерируются автоматически. Для ручного редактирования можно скопировать экспортированные значения и изменить их в вашем проекте. В будущих версиях планируется добавить возможность ручного редактирования.