Цвет: как подобрать гармоничную палитру из 3–4 оттенков
Мы уже проделали важную работу: разобрались, почему старый дизайн устарел, определили приоритеты изменений и поняли, что современный сайт — это не только красиво, но и удобно. Затем мы освоили один из ключевых инструментов порядка — сетку и отступы. Теперь настало время добавить цвет — тот самый элемент, который превращает структуру в живой, выразительный дизайн.
Цвет — не просто украшение. Он направляет внимание, создаёт настроение и помогает пользователю понять, где что находится. Но, как и с любым мощным инструментом, важно не переборщить.
Цветовая палитра: система, а не случайный набор
Когда мы говорим о цвете в дизайне, мы имеем в виду цветовую палитру — это заранее выбранный набор из 3–4 оттенков, которые работают вместе.
Почему именно 3–4 цвета?
Потому что избыток цветов создаёт визуальный шум. Представьте сайт, где каждый блок, кнопка и заголовок — своего цвета. Глаз теряется, сложно понять, на чём сосредоточиться. Это как разговор, в котором все говорят одновременно.
Совет: Чем проще палитра — тем современнее и профессиональнее выглядит сайт. Это не ограничение, а преимущество.
Три ключевых цвета и их роли
Каждый цвет в палитре выполняет свою функцию — как актёры в спектакле. Давайте познакомимся с ними.
Основной цвет
Это «лицо» вашего сайта — цвет, который ассоциируется с брендом. Чаще всего он используется в логотипе, шапке, основных элементах навигации.
Пример: если у вас есть логотип с синим оттенком — смело берите его за основу.
Фоновый цвет
Это «сцена», на которой всё происходит. Обычно это нейтральные оттенки: белый, светло-серый, бежевый.
Важно: фон должен поддерживать читаемость. Тёмно-серый фон с тёмным текстом — плохая идея. Мы к этому ещё вернёмся, когда будем говорить о контрасте.
Акцентный цвет
Это «стрелка», которая направляет внимание. Он используется точечно: на кнопках, ссылках, важных заголовках.
Пример: фон — белый, основной цвет — синий, акцентный — жёлтый. Кнопка «Заказать» жёлтого цвета сразу бросается в глаза.
Совет: акцентный цвет должен быть один. Два и больше — и он теряет силу.
Как создать свою палитру: пошагово
Теперь давайте соберём палитру для вашего сайта. Следуйте этим шагам:
-
Выберите основной цвет
Возьмите цвет из логотипа или тот, который уже есть на сайте. Если его нет — выберите один, который отражает настроение сайта (например, синий — доверие, зелёный — природа, оранжевый — энергия). -
Добавьте фоновый цвет
Лучше всего подойдёт белый или светло-серый. Это безопасно, современно и универсально. -
Выберите один акцентный цвет
Он должен контрастировать с основным. Например:- Основной: синий → акцент: жёлтый или оранжевый
- Основной: зелёный → акцент: коралловый
-
Проверьте сочетание
Откройте сайт на телефоне. Хорошо ли видны кнопки? Легко ли читается текст? Если в солнечный день что-то не читается — нужно усилить контраст.
Пример: до и после
Было:
- 6 цветов: красный, фиолетовый, тёмно-зелёный, бирюзовый, жёлтый, оранжевый
- Текст на фоне изображения без подложки
- Фон — тёмно-серый, текст — серый
→ результат: глаз устаёт, сложно понять, где что
Стало:
- Основной: синий (#2A5C9A)
- Фоновый: белый
- Акцентный: оранжевый (#FF6B35)
→ результат: порядок, фокус, легко читать
Практическое задание
Создайте свою цветовую палитру из 3–4 цветов:
- Запишите основной цвет (HEX-код или название)
- Выберите фоновый цвет (рекомендуем: белый или светло-серый)
- Добавьте один акцентный цвет
- Проверьте: легко ли представить кнопку или заголовок в акцентном цвете?
Подсказка: если сомневаетесь — используйте шаблон:
белый фон + синий основной + жёлтый акцент — это сочетание работает в 9 из 10 случаев.
Что дальше?
Мы научились управлять вниманием с помощью цвета. Но цвет текста должен быть не только красивым — он должен быть читаемым.
В следующей теме — Размеры текста: от H1 до основного текста (минимум 16px) — мы узнаем, как правильно выбирать размеры шрифтов, чтобы текст было удобно читать на любом устройстве.
Цвет и шрифт работают вместе. Уже скоро ваш сайт станет не просто современным — он станет по-настоящему удобным.