Color Palette Generator
Как пользоваться
- 1
Выберите гармонию
Выберите правило цветовой гармонии, например аналоговую или комплементарную, чтобы задать связь между цветами.
- 2
Выберите настроение
Задайте атмосферу с помощью селектора настроения. Выберите пастельный, яркий или тёмный режим под стиль бренда.
- 3
Сгенерировать
Нажмите «Сгенерировать», чтобы создать уникальные палитры. Закрепите понравившиеся цвета и обновите остальные.
- 4
Экспорт
Скопируйте отдельные коды Hex или нажмите «Экспорт», чтобы получить полную конфигурацию Tailwind CSS.
Руководство по теории цвета
Понимание гармонии
- Аналогичные
Цвета, расположенные рядом на цветовом круге. Создают спокойный и комфортный дизайн.
- Дополнительные
Цвета, противоположные на цветовом круге. Дают высокий контраст и сильное воздействие.
- Триадические
Три цвета, равномерно распределённые по кругу. Высокий контраст при сохранении гармонии.
- Разделённое дополнение
Вариация комплементарной схемы. Используется базовый цвет и два соседних с его дополнением.
- Монохромные
Вариации светлоты и насыщенности одного цвета. Чисто, элегантно и успокаивающе.
- Случайный хаос
Полностью случайные цвета без строгих правил. Хороши для неожиданного вдохновения.
Исследование настроений
- Стандарт
Сбалансированные насыщенность и яркость. Подходит для общего веб-дизайна и UI.
- Пастельные мечты
Высокая яркость и низкая насыщенность. Мягко и успокаивающе. Идеально для лайфстайл-тем.
- Яркий неон
Высокая насыщенность и средняя яркость. Энергично и привлекает внимание.
- Тёмная тема
Низкая яркость и приглушённые тона. Глубоко, загадочно и современно.
- Ретро-винтаж
Приглушённые и слегка тёплые тона. Ностальгично, классично и вне времени.
Рекомендуемые инструменты
Подборка полезных утилит
Подбор сочетающихся цветов
Обзор
Выбор цвета может определить судьбу дизайна. Случайные сочетания выглядят хаотично; продуманные палитры на основе теории цвета смотрятся осознанно и профессионально. Этот инструмент создаёт гармоничные палитры из одного базового цвета по проверенным правилам теории цвета: комплементарные (напротив на цветовом круге), аналоговые (рядом), триадные (три равноудалённых) и тетрадные (четыре). Он также извлекает палитры из загруженных изображений и показывает значения hex/RGB/HSL для прямого использования в CSS или дизайн-файлах.
Как это работает
Теория цвета, выраженная математически: цвет в HSL имеет тон (0–360°), насыщенность и светлоту. Комплементарный = базовый тон + 180°. Триадный = базовый + 120° и + 240°. Аналоговый = базовый ± 30°. Инструмент вычисляет это математически и показывает палитру с копированием каждого цвета. Палитры из изображений используют квантование цвета (кластеризацию k-means) для поиска доминирующих оттенков.
Когда пригодится
Дизайн интерфейса сайта или приложения (основной, дополнительный, акцентный цвета). Подбор цветов фирменного стиля. Согласование визуала презентаций. Выбор краски для комнаты. Создание цветовых схем для визуализации данных. Генерация тем для графики — постов в Instagram, превью YouTube, заголовков блога.
Частые вопросы
Комплементарные расположены напротив на цветовом круге (синий + оранжевый) — высокий контраст, броско. Аналоговые рядом (синий + сине-зелёный + зелёный) — спокойнее и целостнее. Комплементарные для акцентов, аналоговые для фона.