Генератор цветовых палитр
Что такое цветовая гармония
Цветовая гармония — это принцип сочетания цветов, при котором они воспринимаются как единое целое и вызывают эстетическое удовлетворение. Теория цвета, основанная на цветовом круге Иттена, определяет математические соотношения между оттенками, которые гарантируют визуальный баланс. Наш генератор использует эти принципы для автоматического создания палитр.
Цветовой круг
Основа теории цвета — круг с 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-код.
Связанные расчёты
Другие наши инструменты для работы с цветом и дизайном.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор авиации: расход топлива, время полёта, центровка
Расчёт расхода авиатоплива, времени полёта, веса и центровки, длины ВПП и стоимости лётного часа. Для пилотов и авиаторов.
Калькулятор мощности велосипедиста
Рассчитайте FTP, зоны мощности по Коггану, watts/kg и прогноз скорости. Для велосипедистов и триатлетов.
Калькулятор электрика
Расчет сечения кабеля, выбор автомата, расчет потерь напряжения и освещенности. Профессиональный инструмент.
Валидатор СНИЛС
Проверка контрольной суммы СНИЛС (11 цифр). Алгоритм проверки контрольного числа, пакетная валидация.
Калькулятор ветроэнергетики: мощность турбины, Вейбулл, AEP и LCOE
Расчёты ветроэнергетики: мощность ВЭУ, профиль ветра, распределение Вейбулла, годовая выработка AEP, турбулентность, экономика ветропарка.
Калькулятор индексации алиментов
Перерасчёт алиментов в твёрдой денежной сумме по изменению прожиточного минимума. СК РФ ст. 117, данные по регионам 2018–2025.
Калькулятор OSB плит
Расчёт количества плит ОСБ на пол, стены и крышу. Учёт размера листа, толщины и запаса на подрезку.
Калькулятор сайдинга
Расчёт сайдинга: панели, комплектующие, площадь фасада. Виниловый, металлический, фиброцементный.
Калькулятор трубопроводов: пропускная способность, потери давления
Расчёт пропускной способности трубопровода, потерь давления по Дарси-Вейсбаха, толщины стенки по ГОСТ, гидравлического удара и теплоизоляции.
Калькулятор бережливого производства (Lean)
Расчёты Lean: время такта, OEE, канбан, 5S аудит, SMED, VSM метрики
Валидатор VIN-номера автомобиля
Проверка контрольной цифры VIN и расшифровка: производитель, страна, год выпуска, завод. ISO 3779.
Калькулятор звука и волн
Расчет эффекта Доплера, скорости звука, длины волны и частоты. Конвертер децибел (дБ).
Калькулятор паразитологии
Подсчёт яиц гельминтов EPG, паразитемия малярии, FECRT, дозирование антигельминтных препаратов, определитель паразитов.
Калькулятор расхода семян газона
Расчёт расхода семян газона по площади и типу. Партерный, спортивный, теневой, мавританский газон.
Калькулятор эпоксидной смолы
Расчёт расхода эпоксидной смолы и отвердителя по объёму формы. Стоимость заливки.