Генератор цветовой палитры (5 схем из одного базового цвета)

Выберите базовый цвет, выберите схему из теории цвета и получите согласованную палитру. Нажмите на образцы для копирования отдельных hex-значений или скопируйте все сразу для использования в дизайн-инструментах и CSS-переменных.

Базовый цвет

Цветовая схема

Сгенерированная палитра

#3BDFF6
#3B82F6
#513BF6

Как это работает

Пять схем теории цвета

Комплементарная: два цвета на противоположных концах цветового колеса (180° друг от друга). Высокий контраст, яркость. Используется для акцентов, кнопок призыва к действию и создания фокусных точек.

Аналоговая: три соседних цвета на колесе (30° друг от друга). Гармоничная и приятная, низкий контраст. Распространена в природе; отлично подходит для фонов и поверхностей UI.

Триадная: три равноудалённых цвета (120° друг от друга). Яркая и сбалансированная. Используется в игривых или энергичных дизайнах.

Тетрадная (прямоугольник): четыре цвета, образующие прямоугольник (90° друг от друга). Богатая палитра, но сложнее сбалансировать — как правило, один используется как доминирующий, остальные как акценты.

Монохроматическая: тона, тинты и тени одного оттенка. Утончённая и единая. Распространена в минималистичном дизайне и корпоративном брендинге.

Выбор начального цвета

Цвета бренда: большинство проектов начинается с существующего логотипа или фирменного цвета. Проверьте его как базовый во всех 5 схемах, чтобы найти лучший вариант для своего дизайна.

Вдохновение: возьмите цвет из фотографии, искусства или природы. Яркие цвета (высокая насыщенность, средняя светлость) лучше всего работают как базовые; очень бледные или очень тёмные цвета дают «выцветшие» палитры.

Доступность: убедитесь, что в финальной палитре достаточно контраста для текста. Используйте наш инструмент проверки контраста, чтобы убедиться, что пары цветов переднего/фонового плана соответствуют WCAG AA (4,5:1 для обычного текста).

Использование палитры

CSS-переменные: определите цвета палитры как переменные :root (--color-primary, --color-accent и т.д.), чтобы менять темы, изменив одно место.

Дизайн-инструменты: вставьте hex-значения в библиотеки цветов Figma, Sketch или Adobe XD. Большинство инструментов принимают hex напрямую; некоторые также принимают HSL или именованные CSS-цвета.

Ограничьте использование: даже с 5 цветами реальные дизайны обычно используют 2–3 цвета явно, а остальные — экономно. Правило 60-30-10 (60% доминирующий, 30% вторичный, 10% акцент) — полезный начальный баланс.

Частые вопросы

›Какую схему выбрать?

Аналоговая — самый безопасный выбор для большинства дизайнов: три близких цвета создают гармонию без монотонности. Комплементарная хорошо работает для выделения (кнопки CTA). Монохроматическая — для минималистичных и строгих брендов. Триадная — для игривого и энергичного ощущения.

›Можно ли получить больше 5 цветов?

Не в этом инструменте — мы генерируем канонические схемы из 2–5 цветов. Для более крупных палитр используйте аналоговый вывод и создайте монохроматические оттенки каждого (комбинируйте схемы).

›Использует ли алгоритм перцептуально равномерное цветовое пространство?

Используется математика HSL — быстрая и предсказуемая. Для перцептуально равномерных результатов (лучше для палитр, настроенных для доступности) продвинутые инструменты используют OKLCH или CIELAB. HSL достаточен для большинства дизайн-задач.

›Будет ли моя палитра доступной?

Не автоматически. Схемы теории цвета гарантируют эстетическую гармонию, но не контраст для текста. Всегда проверяйте комбинации текст-на-фоне нашим инструментом проверки контраста перед публикацией.

›Можно ли сохранить любимые палитры?

Пока нет — скопируйте hex-коды в свою дизайн-систему или заметки. URL-адреса с закладками для палитр запланированы.

›Что насчёт палитр Material Design или Tailwind?

Это заранее подобранные системы. Сгенерируйте здесь базовую схему, затем найдите похожие цвета Material/Tailwind. Некоторые приложения экспортируют hex-коды, совместимые с этими системами напрямую.

›Почему моя палитра выглядит «плоской»?

Если базовый цвет очень бледный (высокая светлость) или очень тёмный (низкая светлость), у сгенерированной палитры ограниченный динамический диапазон. Выберите базовый цвет со средней светлостью (40–60%) и высокой насыщенностью (70%+) для ярких результатов.

›Данные покидают браузер?

Нет. Все вычисления выполняются локально; ничего не передаётся на сервер.