Генератор цветовых палитр
Что такое цветовая гармония
Цветовая гармония — это принцип сочетания цветов, при котором они воспринимаются как единое целое и вызывают эстетическое удовлетворение. Теория цвета, основанная на цветовом круге Иттена, определяет математические соотношения между оттенками, которые гарантируют визуальный баланс. Наш генератор использует эти принципы для автоматического создания палитр.
Цветовой круг
Основа теории цвета — круг с 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-код.
Связанные расчёты
Другие наши инструменты для работы с цветом и дизайном.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Генератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор пропорций золотого сечения
Расчёт пропорций по золотому сечению (φ = 1.618). Визуализация золотого прямоугольника и спирали Фибоначчи.
/zolotoe-sechenieКонвертер цветовых пространств
Конвертация цветов между CMYK, RGB, HEX, HSL, HSV с визуальным предпросмотром. Цветовые гармонии и контрастность WCAG.
/konverter-cvetov-cmyk-rgb-hexКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientКалькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculatorКалькулятор PPI и DPI (плотность пикселей)
Рассчитайте PPI экрана, размер пикселя и физические размеры монитора/телефона. Конвертер пикселей в сантиметры.
/ppi-calculatorКалькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
/ux-metrics-calculatorКонвертер типографских единиц
Конвертация между пунктами, мм, пикселями, em/rem. Типографская шкала, пика, цицеро, дюймы.
/konverter-tipografskih-edinicКалькулятор соотношения сторон
Расчёт и пересчёт соотношения сторон изображения/видео. Определение ratio, пересчёт размеров, кроп.
/sootnoshenie-storonКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatКалькулятор размера баннера
Размеры баннеров для VK, Telegram, YouTube, Яндекс Директ, Google Ads. Все форматы с рекомендациями по файлу.
/razmer-bannera