Психология и математика цвета в дизайне
Цвет — это первое, что считывает мозг зрителя, еще до того, как он прочтет заголовок. Удачная палитра может спасти слабый макет, а плохая — убить даже самую крутую типографику.
В этом гайде мы разберем три столпа работы с цветом: пропорции, инструменты и психологию ниши.
Золотое правило баланса: 60–30–10
Почему работы новичков часто выглядят «пёстро» или «грязно»? Потому что цветов слишком много или они спорят друг с другом. Чтобы этого избежать, используй формулу интерьерных дизайнеров, которая идеально работает в вебе и графике.
Формула:
- 60% — Основной цвет (Base). Это «холст». Чаще всего нейтральные оттенки: белый, светло-серый, бежевый или, наоборот, глубокий темный (для Dark Mode). Им заливаем фон.
- 30% — Вторичный цвет (Secondary). Это цвет бренда. Им мы выделяем заголовки, плашки, меню, иконки, футер. Он задает настроение.
- 10% — Акцентный цвет (Accent). Самый яркий и "вкусный". Используем только для целевых действий (CTA): кнопки «Купить», ссылки, уведомления, важные бейджи.
Если кажется, что 3 цветов мало, разбавляй их оттенками. Светло-синий и темно-синий — это всё еще те же "30%", но дизайн становится глубже.
Как подобрать идеальный акцент
Как найти тот самый цвет для кнопки, чтобы она «горела», но не выжигала глаза?
Способ 1: Комплементарная схема (Противоположности)
Открываем цветовой круг Иттена. Берем ваш основной цвет (например, синий) и смотрим, что находится ровно напротив него. Это оранжевый. Эти цвета максимально усиливают друг друга.
Способ 2: Аналоговая схема (Соседи)
Для более спокойных интерфейсов. Берем цвета, которые стоят рядом.
Топ-3 сервисов для работы с цветом
Coolors.co — самый популярный генератор. Жми "Пробел", и он сам соберет гармоничную палитру. Можно заблокировать понравившийся цвет и менять остальные.
Adobe Color — профессиональный инструмент. Позволяет строить палитры по науке (триада, монохром, комплементарные).
Material Palette — идеально для UI-дизайнеров. Выбираешь два цвета, сервис генерирует полную палитру для интерфейса (какой цвет взять для текста, какой для иконок).
Психология цвета: Попадаем в нишу
Дизайн должен решать задачу. Странно делать сайт похоронного бюро в розовом цвете или банк в грязно-коричневом. Цвета вызывают подсознательные ассоциации.
🔵 Синий
- Ассоциации: Доверие, спокойствие, технологии, логика, безопасность.
- Ниши: Банки (VTB), IT (Intel, Samsung), Медицина, Юриспруденция.
- Осторожно: Еда (синий подавляет аппетит).
🔴 Красный / Оранжевый
- Ассоциации: Энергия, страсть, срочность, аппетит, действие, скидки.
- Ниши: Фастфуд (McDonalds, Burger King), Ритейл (скидки), Спорт, Авто.
- Осторожно: Может вызывать тревогу или агрессию. Используйте дозированно (те самые 10% акцента).
🟢 Зеленый
- Ассоциации: Природа, здоровье, рост, деньги, свежесть.
- Ниши: Эко-товары, ЗОЖ, Финансы (Сбер, "Рост"), Фармацевтика, Недвижимость.
⚫️ Черный / Золотой
- Ассоциации: Премиум, люкс, тайна, элегантность, власть.
- Ниши: Дорогие авто, Часы, Брендовая одежда, Элитная недвижимость.
- Нюанс: Требует много "воздуха" и качественных фотографий.
🟣 Фиолетовый
- Ассоциации: Креативность, мудрость, магия, ностальгия.
- Ниши: Творческие студии, Сладости (Milka), Бьюти-сфера, Эзотерика.
Правила нужны, чтобы их знать, но иногда нарушать. Если хочешь выделиться среди 10 синих банков — сделай желтый (как Тинькофф или Райффайзен), но делай это осознанно!