Генератор цветовых палитр
Что такое цветовая гармония
Цветовая гармония — это принцип сочетания цветов, при котором они воспринимаются как единое целое и вызывают эстетическое удовлетворение. Теория цвета, основанная на цветовом круге Иттена, определяет математические соотношения между оттенками, которые гарантируют визуальный баланс. Наш генератор использует эти принципы для автоматического создания палитр.
Цветовой круг
Основа теории цвета — круг с 12 основными оттенками. Первичные цвета (красный, жёлтый, синий) смешиваются, образуя вторичные и третичные. Все типы гармоний определяются геометрическими фигурами, вписанными в этот круг: прямая линия, треугольник, квадрат.
Баланс и контраст
Гармоничная палитра сочетает контраст с единством. Слишком похожие цвета сливаются, слишком разные — конфликтуют. Правила гармонии помогают найти золотую середину: достаточный контраст для читаемости и визуального интереса при сохранении общей целостности.
Пространство HSL
Генератор работает в пространстве HSL (оттенок, насыщенность, яркость), где H — угол на цветовом круге (0-360°). Это позволяет точно вычислять гармоничные цвета: комплементарный цвет находится на 180° от базового, триадные — через каждые 120°, и так далее.
Возможности генератора
Полный набор инструментов для создания, проверки и экспорта цветовых палитр — всё в одном месте.
6 типов гармонии
Комплементарная, аналогичная, триадная, тетрадная, сплит-комплементарная и монохромная. Каждый тип создаёт уникальное настроение и работает для разных задач.
Закрепление цветов
Закрепите понравившиеся цвета и перегенерируйте остальные. Удобно, когда у вас уже есть основной бренд-цвет и нужно подобрать к нему дополнительные оттенки.
Оттенки и тени
10 вариаций базового цвета от самого светлого к самому тёмному. Идеально для создания шкалы цветов в дизайн-системе (50, 100, 200... 900).
Экспорт в 3 формата
CSS Custom Properties (var(--color-1)), Tailwind config (colors: {...}), SCSS-переменные ($color-1). Скопируйте и вставьте в проект за секунду.
Проверка контрастности
Матрица контрастности WCAG между всеми цветами палитры. Убедитесь, что текст на цветном фоне читаем для людей с нарушениями зрения (AA/AAA уровни).
Случайная палитра
Генерация случайного базового цвета одной кнопкой. Отличный способ найти вдохновение, когда не знаете, с чего начать. Каждый клик — новая идея.
Типы цветовых гармоний
Каждый тип гармонии создаёт свою атмосферу и подходит для определённых задач. Выберите тот, который лучше соответствует характеру вашего проекта.
Комплементарная
Два цвета, расположенные напротив друг друга на цветовом круге (разница 180°). Создаёт максимальный контраст и визуальное напряжение. Один цвет обычно доминирует, второй — акцентирует. Классика: синий и оранжевый, красный и зеленый.
Применение: логотипы, CTA-кнопки, спортивные бренды
Аналогичная
Три-пять цветов, расположенных рядом на цветовом круге (шаг 30°). Создаёт спокойную, гармоничную палитру без резких контрастов. Часто встречается в природе: осенние листья (жёлтый, оранжевый, красный) или морской пейзаж (голубой, синий, бирюзовый).
Применение: корпоративные сайты, wellness-бренды, интерьеры
Триадная
Три цвета, равноудалённых друг от друга на цветовом круге (разница 120°). Обеспечивает баланс между контрастом и гармонией. Палитра выглядит яркой и энергичной, даже если использовать приглушённые оттенки. Правило: один цвет — доминирующий, два — дополнительные.
Применение: детские бренды, игры, творческие проекты
Тетрадная (квадрат)
Четыре цвета, образующих квадрат на цветовом круге (шаг 90°). Самая сложная для применения, но и самая разнообразная схема. Даёт максимальную палитру, но требует тщательного баланса: один доминирующий, один вторичный и два акцентных цвета.
Применение: иллюстрации, инфографика, сложные дашборды
Сплит-комплементарная
Базовый цвет + два цвета, соседних с комплементарным (150° и 210° от базового). «Мягкая» версия комплементарной схемы: сохраняет контраст, но менее агрессивна. Проще в применении, чем чистая комплементарная, и реже приводит к визуальному конфликту.
Применение: лендинги, портфолио, e-commerce
Монохромная
Вариации одного оттенка с разной насыщенностью и яркостью. Самая простая и безопасная схема — она гарантированно выглядит гармонично. Создаёт ощущение элегантности и утончённости. Идеальна для минималистичного дизайна и UI-компонентов.
Применение: дизайн-системы, дашборды, корпоративный стиль
Советы по выбору палитры
Практические рекомендации, которые помогут выбрать идеальные цвета для вашего проекта — от сайта до презентации.
1Правило 60-30-10
Классическое правило дизайна интерьеров, отлично работающее в вебе. 60% — доминирующий цвет (фон), 30% — вторичный (блоки, карточки), 10% — акцентный (кнопки, ссылки). Такое соотношение создаёт визуальный баланс и направляет внимание пользователя.
2Начинайте с бренд-цвета
Если у вас уже есть основной цвет бренда — используйте его как базовый. Закрепите его в генераторе и подберите дополнительные оттенки. Комплементарная схема даст яркий акцент, аналогичная — мягкое окружение, монохромная — шкалу оттенков для UI.
3Учитывайте контекст и аудиторию
Банковский сайт и детский магазин требуют разных палитр. Холодные оттенки (синий, серый) ассоциируются с надёжностью и технологиями. Тёплые (оранжевый, жёлтый) — с энергией и дружелюбием. Пастельные — с мягкостью и уютом.
4Проверяйте доступность
Красивая палитра бесполезна, если текст на её фоне нечитаем. Используйте встроенную проверку контрастности. Минимум для обычного текста — уровень AA (4.5:1), для крупного — 3:1. Около 8% мужчин не различают красный и зелёный — учитывайте это.
5Не больше 5 цветов в палитре
Для большинства проектов достаточно 3-5 цветов: основной, дополнительный, акцентный + нейтральные (серый, белый). Больше цветов усложняют поддержку и создают визуальный хаос. Если нужна расширенная палитра — используйте монохромные вариации каждого цвета.
6Тестируйте в контексте
Цвета выглядят по-разному в изоляции и в реальном макете. Выбрав палитру, экспортируйте её в CSS и примените к вашему проекту. Проверьте на мобильных устройствах и при разном освещении. Экраны TN, IPS и OLED передают цвета по-разному.
Как пользоваться генератором
Создайте идеальную палитру за несколько шагов.
Выберите базовый цвет
Кликните на палитру или введите HEX-код вручную. Это будет отправная точка для генерации гармоничных сочетаний.
Выберите тип гармонии
Комплементарная для контраста, аналогичная для мягкости, триадная для баланса. Попробуйте разные типы — результат меняется мгновенно.
Настройте и закрепите
Закрепите понравившиеся цвета, нажмите «Случайная палитра» для вдохновения. Проверьте контрастность между цветами.
Экспортируйте результат
Скопируйте палитру в формате CSS, Tailwind или SCSS. Нажмите на любой цвет, чтобы скопировать его HEX-код.
Связанные расчёты
Другие наши инструменты для работы с цветом и дизайном.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Был ли этот калькулятор полезен?
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор шумового загрязнения: сложение дБ, экран, звукоизоляция Rw
Расчёты шумового загрязнения: сложение источников (дБ), затухание с расстоянием, звукоизоляция Rw (СП 51), шумозащитный экран, LAeq.
Калькулятор продлённого дня
Расчёт стоимости продлёнки: питание, секции, кружки. Сравнение вариантов.
Калькулятор кредиторской задолженности
Рассчитайте оборачиваемость кредиторской задолженности, DPO, эффективность использования торгового кредита и скидки за раннюю оплату.
Калькулятор стоимости сотрудника
Зарплата, НДФЛ, страховые взносы ПФР/ФСС/ФОМС, отпускные, больничные. Для работодателей России.
Медицинский калькулятор шкал риска и eGFR
Расчёт риска инсульта, тромбоза, оценка функции почек (eGFR CKD-EPI) и персонализированный календарь вакцинации.
Калькулятор сборов в поездку: чек-лист, вес, чемодан
Калькулятор сборов. Чек-лист вещей по типу поездки, расчёт веса багажа, выбор чемодана, нормы авиакомпаний.
Калькулятор радиочастот (RF)
Длина волны, усиление и мощность, потери в кабеле, КСВ (VSWR) и энергетический бюджет радиолинии.
Генератор .htaccess редиректов
Визуальный конструктор .htaccess для Apache. Создание редиректов 301/302, принудительный HTTPS, www, блокировка IP, кэширование и сжатие.
Калькулятор нормы давления
Определите норму артериального давления по возрасту и полу. Классификация ВОЗ.
Калькулятор ремонта квартиры: материалы, работы, бюджет
Калькулятор ремонта. Расчёт площади стен и пола, количества материалов, стоимости работ, электрики, сантехники и общего бюджета.
Чекер HTTP-заголовков сайта
Анализ заголовков безопасности HTTP: CSP, HSTS, X-Frame-Options. Визуальный конструктор CSP, рекомендации.
Калькулятор шкалы Уэллса (ТГВ и ТЭЛА)
Оценка вероятности тромбоза глубоких вен и ТЭЛА по шкале Уэллса. Клинический инструмент для врачей.
Калькулятор нормы сна по возрасту
Определите норму сна для детей и взрослых. Рекомендации по продолжительности сна по возрасту.
Калькулятор больничного листа
Расчёт больничного: средний заработок, стаж, количество дней. По 255-ФЗ.
Калькулятор шитья: расход ткани, нитки, стоимость изделия
Калькулятор для швей. Расход ткани по типу изделия, нитки и фурнитура, расчёт стоимости, выбор швейной машины.