Советы по дизайну цветовых палитр: создание гармоничных комбинаций
Удачно подобранная цветовая палитра превращает дизайн из любительского в профессиональный. Теория цвета даёт основу, но эффективное её применение требует понимания как науки, так и психологии, стоящей за выбором цветов. Это руководство охватывает принципы и практические техники построения работающих палитр.
Цветовой круг и цветовые отношения
Все правила цветовой гармонии основаны на позициях на цветовом круге — круговом расположении оттенков, где соседние цвета плавно переходят друг в друга, а противоположные создают контраст.
Комплементарные цвета
Цвета, расположенные прямо напротив друг друга на круге. Создают максимальный контраст и визуальное напряжение.
- Пример: Синий (#2563EB) и Оранжевый (#EA580C)
- Применение: Кнопки призыва к действию, акцентные элементы, выделение
- Предупреждение: Комплементарные цвета на полной насыщенности рядом друг с другом могут создавать визуальную вибрацию. Приглушите один из них.
Аналоговые цвета
Три-пять соседних цветов на круге. Создают спокойные, гармоничные дизайны.
- Пример: Синий (#2563EB), Сине-фиолетовый (#7C3AED), Фиолетовый (#9333EA)
- Применение: Фоны, большие поверхности, целостный брендинг
- Совет: Выберите один доминирующий цвет, один поддерживающий и один акцентный
Триадные цвета
Три цвета, равномерно расположенные по кругу (на 120° друг от друга). Яркие и сбалансированные.
- Пример: Красный (#DC2626), Жёлтый (#CA8A04), Синий (#2563EB)
- Применение: Игривые дизайны, детские товары, категории визуализации данных
Расщеплённо-комплементарная схема
Базовый цвет плюс два цвета, соседних с его комплементом. Меньше напряжения, чем в чисто комплементарной схеме.
- Пример: Синий (#2563EB), Красно-оранжевый (#EA580C), Жёлто-оранжевый (#CA8A04)
- Применение: Дизайны, которым нужен контраст без интенсивности комплементарных схем
Генерируйте эти схемы автоматически с помощью нашего Генератора цветовых палитр.
Правило 60-30-10
Самое надёжное соотношение для применения цветов в любом дизайне:
- 60%: Основной/доминирующий цвет (фоны, большие поверхности)
- 30%: Вторичный цвет (карточки, панели, вспомогательные элементы)
- 10%: Акцентный цвет (кнопки, выделения, ссылки)
:root {
--primary: #F8FAFC; /* 60% — Светлый фон */
--secondary: #1E293B; /* 30% — Тёмные поверхности */
--accent: #3B82F6; /* 10% — Интерактивные элементы */
}
Это соотношение совпадает с принципами работы интерьерных дизайнеров — и работает по тем же психологическим причинам. Доминирующий цвет задаёт настроение, вторичный обеспечивает структуру, а акцентный привлекает внимание.
Создание палитры с нуля
Шаг 1: Начните с бренда или настроения
Выберите один базовый цвет, отражающий бренд или настроение:
- Синий: Доверие, профессионализм, технологии
- Зелёный: Рост, здоровье, природа
- Фиолетовый: Роскошь, креативность, мудрость
- Красный: Энергия, срочность, страсть
- Оранжевый: Тепло, энтузиазм, доступность
Шаг 2: Сгенерируйте вариации
Создайте 9-10 оттенков базового цвета, используя манипуляции HSL. Сохраняйте тон постоянным, варьируйте насыщенность и светлоту:
--blue-50: hsl(217, 91%, 97%);
--blue-100: hsl(217, 91%, 93%);
--blue-200: hsl(217, 91%, 85%);
--blue-300: hsl(217, 91%, 75%);
--blue-400: hsl(217, 91%, 65%);
--blue-500: hsl(217, 91%, 60%); /* Базовый */
--blue-600: hsl(217, 91%, 50%);
--blue-700: hsl(217, 91%, 40%);
--blue-800: hsl(217, 91%, 30%);
--blue-900: hsl(217, 91%, 20%);
Подробнее о HSL и других цветовых форматах читайте в нашем руководстве по цветовым форматам.
Шаг 3: Добавьте нейтральные цвета
Каждой палитре нужны серые тона. Создайте тёплую или холодную серую шкалу, дополняющую ваш базовый цвет:
/* Холодные серые (для синей базы) */
--gray-50: hsl(210, 20%, 98%);
--gray-100: hsl(210, 16%, 93%);
--gray-500: hsl(210, 10%, 53%);
--gray-900: hsl(210, 24%, 10%);
Шаг 4: Добавьте семантические цвета
Цвета состояний для успеха, предупреждения, ошибки и информации:
--success: hsl(142, 76%, 36%); /* Зелёный */
--warning: hsl(38, 92%, 50%); /* Янтарный */
--error: hsl(0, 84%, 60%); /* Красный */
--info: hsl(199, 89%, 48%); /* Голубой */
Требования доступности
Коэффициенты контрастности (WCAG 2.1)
| Элемент | Минимальное соотношение | Улучшенное соотношение |
|---|---|---|
| Обычный текст | 4.5:1 | 7:1 |
| Крупный текст (18px+) | 3:1 | 4.5:1 |
| UI-компоненты | 3:1 | — |
Цветовая слепота
8% мужчин имеют ту или иную форму нарушения цветового зрения. Никогда не используйте цвет как единственный способ передачи информации:
- Добавляйте иконки или паттерны рядом с цветовыми индикаторами
- Обеспечивайте достаточный контраст по яркости (работает даже в оттенках серого)
- Тестируйте с помощью симуляторов цветовой слепоты
Стратегия палитры для тёмного режима
Не просто инвертируйте светлую палитру. Тёмный режим требует отдельного подхода:
- Фон: Используйте тёмно-серый (#111827), а не чистый чёрный (#000000). Чистый чёрный создаёт резкий контраст.
- Текст: Используйте не чисто белый (#FFFFFF), а слегка приглушённый (#F9FAFB), чтобы снизить нагрузку на глаза.
- Акцентные цвета: Увеличьте светлоту на 10-15% для видимости на тёмном фоне.
- Тени: Используйте более светлые тени или лёгкое свечение вместо тёмных теней.
/* Светлый режим */
--bg: hsl(0, 0%, 100%);
--text: hsl(0, 0%, 10%);
--accent: hsl(217, 91%, 60%);
/* Тёмный режим */
--bg: hsl(220, 20%, 10%);
--text: hsl(0, 0%, 95%);
--accent: hsl(217, 91%, 70%); /* Светлее в тёмном режиме */
Инструменты для создания палитр
- Наш Генератор цветовых палитр создаёт гармоничные палитры из любого базового цвета
- Наш Конвертер цветов переводит между HEX, RGB и HSL
- Наш Генератор градиентов создаёт плавные переходы между цветами палитры
FAQ
Сколько цветов должна содержать дизайн-палитра?
Полная дизайн-система обычно включает: 1 основной цвет (с 9-10 оттенками), 1-2 акцентных цвета, нейтральную серую шкалу (9-10 оттенков) и 4 семантических цвета (успех, предупреждение, ошибка, информация). Это составляет около 40-50 отдельных цветовых значений, но все они получены из 3-4 базовых оттенков.
В каком режиме проектировать первым — светлом или тёмном?
Начинайте с светлого режима. В нём легче обеспечить читаемость и коэффициенты контрастности с тёмным текстом на светлом фоне. Затем выведите палитру тёмного режима, корректируя значения светлоты. Большинство проблем с доступностью цвета легче выявить и исправить в светлом режиме.
Связанные ресурсы
- Генератор цветовых палитр — Генерируйте палитры из любого базового цвета
- Цветовые форматы: подробное объяснение — Разберитесь в HEX, RGB и HSL
- Руководство по CSS-градиентам — Создавайте градиенты из цветов вашей палитры