Генерация цветовых палитр для дизайна

Введение

Цветовая палитра — это набор цветов, которые вместе формируют визуальный язык продукта. От выбора палитры зависит узнаваемость бренда, читаемость интерфейса и общее впечатление от сайта. Но подобрать гармоничные цвета «на глаз» сложно даже опытному дизайнеру: глаз устаёт, монитор искажает, а под рукой нет образца для сравнения. Поэтому в современной веб-разработке палитры генерируют по правилам цветовой гармонии — это даёт предсказуемый и воспроизводимый результат. В этой статье разберём основные типы цветовых схем, алгоритмы их построения и инструменты для быстрой генерации. Для практической работы используйте нашгенератор палитры — он строит схемы по любому базовому цвету.

Зачем нужны правила цветовой гармонии

Теория цвета существует не первый век — ещё Иттен и Альберс формулировали принципы сочетания оттенков. Суть проста: существуют математические соотношения на цветовом круге, при которых цвета воспринимаются как «спокойные» или, наоборот, «активные». Эти соотношения — те же правила, что используются в живописи, фотографии и кинематографе.

В веб-дизайне правила гармонии решают сразу несколько задач:

• Согласованность интерфейса. Все акцентные цвета строятся по одному правилу — выглядит целостно.
• Воспроизводимость. Палитру можно описать формулой и передать другому дизайнеру.
• Экономия времени. Не нужно перебирать сотни вариантов вручную — схема даёт 5–7 готовых сочетаний.
• Доступность. Правильно построенные палитры легче проверить на контраст по WCAG. Подробнее — в материале проконтраст и доступность.

Цветовой круг: основа всех схем

Цветовой круг — это представление всех оттенков по окружности. В HSL угол 0–360° как раз соответствует положению на круге. Зная положение базового цвета, можно вычислить любой другой, добавив или вычтя определённый угол. Все классические гармонии — это просто расстояния на круге.

Основные типы цветовых схем

Комплементарная (дополнительная)

Два цвета, расположенные на круге друг напротив друга. Например, красный (0°) и зелёный (180°), синий (240°) и жёлтый (60°). Это максимально контрастное сочетание — хорошо для акцентов, CTA-кнопок и иконок уведомлений. Но в больших площадях комбинация может утомлять глаз.

/* Комплементарная пара на основе hsl(11, 100%, 60%) */
--primary:   hsl(11, 100%, 60%);   /* оранжево-красный */
--secondary: hsl(191, 100%, 50%);  /* голубой */

Аналоговая

Три-пять соседних цветов на круге, обычно в диапазоне ±30°. Аналоговые палитры выглядят спокойно и естественно — часто встречаются в природе (закат, осенние листья, морской пейзаж). Подходят для фоновых блоков, иллюстраций и градиентов. Подробнее — в статье проCSS-градиенты.

Триада

Три цвета, равноудалённые друг от друга на 120°. Получается яркая, но сбалансированная палитра — её часто используют для детских и игровых интерфейсов. Один цвет выбирают доминантным, два других — акцентами.

/* Триада на основе hsl(210, 80%, 50%) */
--c1: hsl(210, 80%, 50%); /* синий */
--c2: hsl(330, 80%, 50%); /* пурпурный */
--c3: hsl(90,  80%, 50%); /* зелёный */

Раздельная комплементарная

Базовый цвет плюс два цвета, расположенные симметрично относительно его комплементарного (на 150° и 210°). Достигается контраст, но без жёсткости классической комплементарной пары. Подходит для интерфейсов, где нужно несколько акцентов, не конфликтующих между собой.

Тетрада и квадрат

Тетрада — четыре цвета по углам прямоугольника, квадрат — по углам квадрата. Эти схемы дают богатую палитру, но требуют аккуратной балансировки: один цвет должен доминировать, остальные работать как акценты. Часто используются в брендинге и сложных иллюстрациях.

Монохромные палитры

Отдельный класс — монохромные палитры. Они строятся на одном оттенке, но с разной светлотой и насыщенностью. В HSL это означает: Hue остаётся постоянным, меняются только S и L. Получается спокойная, строгая палитра, идеальная для интерфейсов с большим количеством данных (таблицы, дашборды, админки).

/* Монохромная шкала синего, 6 шагов */
--blue-50:  hsl(210, 80%, 95%);
--blue-100: hsl(210, 80%, 80%);
--blue-200: hsl(210, 75%, 65%);
--blue-400: hsl(210, 80%, 50%);
--blue-600: hsl(210, 70%, 35%);
--blue-800: hsl(210, 60%, 20%);

Монохромная шкала — основа любой дизайн-системы. По ней вычисляются состояния hover, disabled, focus, а также цветовые токены для Tailwind, Material и других библиотек. Подробнее про светлотные шкалы — в статье про HSL цветовую модель.

Программная генерация палитры

Любую из перечисленных схем можно построить в JavaScript. Вот пример функции, которая возвращает комплементарную пару и триаду для заданного цвета:

function rotateHue(h, deg) {
  return (h + deg + 360) % 360;
}

function buildPalette(baseHsl) {
  const { h, s, l } = baseHsl;
  return {
    base:          { h, s, l },
    complementary: { h: rotateHue(h, 180), s, l },
    analogous1:    { h: rotateHue(h, -30), s, l },
    analogous2:    { h: rotateHue(h,  30), s, l },
    triad1:        { h: rotateHue(h, 120), s, l },
    triad2:        { h: rotateHue(h, 240), s, l },
  };
}

const palette = buildPalette({ h: 210, s: 80, l: 50 });

Эту логику использует нашгенератор палитры — он принимает любой цвет в HEX и возвращает готовую схему во всех нужных форматах.

Соотношение цветов в интерфейсе

Даже идеальная палитра может выглядеть плохо, если цвета использовать в неправильных пропорциях. Классическое правило «60-30-10» рекомендует:

• 60% — доминирующий цвет (обычно нейтральный фон).
• 30% — вторичный цвет (карточки, шапка, боковая панель).
• 10% — акцентный цвет (кнопки, ссылки, уведомления).

Такое распределение создаёт визуальную иерархию и не утомляет глаз. Акцентный цвет выбирают из контрастной гармонии — например, комплементарной к доминирующему. Если акцентов больше 10%, интерфейс начинает «кричать».

Какую палитру выбрать для проекта

Шкалы для дизайн-систем

Современный подход — не просто палитра из 5 цветов, а шкала от 50 до 900 для каждого базового цвета. В Tailwind, Material Design, Ant Design шкалы именно такие. Это позволяет:

• Точно подбирать состояния (hover, active, disabled).
• Соблюдать контраст по WCAG при разных темах.
• Расширять палитру новыми цветами без конфликта.

/* Шкала бренда на основе одного оттенка */
--brand-50:  hsl(11, 100%, 95%);
--brand-100: hsl(11, 100%, 85%);
--brand-200: hsl(11, 100%, 75%);
--brand-300: hsl(11, 100%, 65%);
--brand-400: hsl(11, 100%, 60%);
--brand-500: hsl(11, 100%, 55%);
--brand-600: hsl(11, 90%,  45%);
--brand-700: hsl(11, 80%,  35%);
--brand-800: hsl(11, 70%,  25%);
--brand-900: hsl(11, 60%,  15%);

Проверка палитры на доступность

Сгенерированная палитра — это ещё не готовый продукт. Перед использованием обязательно проверьте контраст между акцентным цветом и фоном. Для текста нормальный уровень — 4.5:1, для крупного — 3:1. Используйте нашинструмент проверки контраста — он считает коэффициент автоматически. Если контраст ниже нормы, увеличьте светлотный контраст (например, используйте brand-700 на белом вместо brand-400).

Типичные ошибки при генерации палитры

• Слишком много акцентов. Если в палитре 4–5 ярких цветов на равных правах, глаз не понимает, куда смотреть. Оставьте один доминантный, остальные сделайте нейтральными или пастельными.
• Игнорирование нейтральных цветов. Без серых тонов интерфейс выглядит перегруженным. Включайте в палитру 3–5 оттенков серого для текста, границ и фонов.
• Забытая тёмная тема. Если планируется тёмная тема, шкала должна быть рассчитана под оба режима с самого начала.
• Контраст только на светлом фоне. Проверяйте сочетания и на тёмном фоне — там цвета часто ведут себя иначе.

Заключение

Генерация цветовых палитр по правилам гармонии — это быстро, предсказуемо и доступно даже без художественного образования. Зная основные типы схем (комплементарная, аналоговая, триада, монохромная) и принцип 60-30-10, можно построить профессиональную палитру за несколько минут. Используйте нашгенератор палитры для практической работы, а для глубины — читайте статьи проосновы теории цвета,HSL модель иWCAG контраст. Помните: хорошая палитра не та, что нравится вам, а та, что делает интерфейс понятным и доступным для пользователя.