Цвет работает быстрее слов. Человек ещё не прочитал ни строчки, а уже чувствует, дорогой перед ним бренд или бюджетный, праздничный макет или деловой. Поэтому удачная палитра вытягивает даже простой пост, а случайный набор цветов делает пёстрым любой, даже аккуратно собранный макет.
Подбирать цвета «на глаз» необязательно. Есть несколько простых правил, которые работают почти всегда. Ниже — как распределять цвета, пять способов собрать палитру, проверка читаемости и шесть готовых сочетаний с HEX-кодами.
Сколько цветов нужно
Для большинства макетов хватает трёх-четырёх цветов:
основной — задаёт настроение, обычно это фон или крупные блоки;
дополнительный — поддерживает основной: плашки, рамки, второстепенные элементы;
акцентный — самый яркий, для кнопки, цены или главного слова;
нейтральный — для текста: почти чёрный, тёмно-серый или белый.
Если цветов больше пяти, они начинают спорить друг с другом, и взгляд не понимает, что здесь главное.
Правило 60-30-10
Это пропорция, которую дизайнеры интерьеров используют десятилетиями, и в графическом дизайне она работает так же. Примерно 60% площади занимает основной цвет, 30% — дополнительный и 10% — акцентный.
Например, в посте с объявлением о распродаже кремовый фон занимает большую часть, фиолетовая плашка с заголовком — около трети, а лаймовая кнопка «Купить» — совсем немного. Именно потому, что акцента мало, его сразу видно.
Цифры не нужно отмерять линейкой — это ориентир. Главное, чтобы у цветов была иерархия: один главный, один помощник и один акцент.
5 способов собрать палитру
1. Начните с одного цвета
Самый простой путь — взять цвет, который уже есть: фирменный цвет бренда, цвет товара или упаковки. Остальные цвета подбираются к нему: светлый или тёмный нейтральный фон и один акцент.
2. Возьмите цвета с фотографии
Если в макете есть главная фотография, она уже подсказывает палитру. Посмотрите, какие цвета в ней преобладают, и возьмите два-три из них для фона и надписей. Так текст и фото выглядят единым целым, а не наклеенными друг на друга.
3. Соседние цвета на круге
Цвета, которые стоят рядом на цветовом круге, — например, синий, бирюзовый и зелёный — дают спокойную, мягкую палитру. Она хорошо подходит для фона и градиентов. Чтобы макет не стал скучным, добавьте один контрастный акцент.
4. Противоположные цвета
Цвета с противоположных сторон круга — фиолетовый и жёлтый, синий и оранжевый — максимально контрастны. Такая пара сразу притягивает взгляд, но в равных долях режет глаз. Используйте один цвет как основной, а второй — только как акцент.
5. Один цвет в разных оттенках
Монохромная палитра — это один цвет от светлого до тёмного. Выглядит дорого и аккуратно, с ней сложно ошибиться. Подходит для минималистичных брендов, презентаций и премиальных товаров.
Проверьте, что текст читается
Красивые цвета бесполезны, если на них не прочитать текст. У сочетания текста и фона есть числовая мера — коэффициент контраста. Международные рекомендации по доступности (WCAG) советуют для обычного текста контраст не ниже 4,5:1, для крупных заголовков — не ниже 3:1.
Самые частые ловушки — светлый текст на светлом фоне: белый на жёлтом, лаймовом или голубом. Белый на лаймовом даёт всего 1,1:1, то есть текст почти исчезает. Тёмный текст на том же лаймовом — уже 15:1.
Быстрая проверка без расчётов: сделайте скриншот макета чёрно-белым. Если надпись сливается с фоном, контраста мало. Ещё одно правило — не передавайте смысл только цветом: красный и зелёный многие люди с особенностями цветовосприятия почти не различают.
6 готовых палитр
Эти сочетания можно сразу перенести в макет — достаточно вставить HEX-код в поле цвета.
Лаванда и лайм — #754DF5, #D8FF55, #1B1530, #F5F1E8. Свежо и современно: IT, онлайн-школы, digital-услуги.
Шалфей и песок — #8A9A7B, #E9DCC6, #3F4A3C, #C9774F. Природно и спокойно: эко-товары, косметика, интерьер.
Пыльная роза — #F7EFEA, #E8C4C0, #B0726A, #5A3A35. Нежно и тепло: свадьбы, салоны красоты, цветочные магазины.
Ретро-поп — #FF5A36, #FFC93C, #2D6CDF, #111111. Громко и весело: афиши, фестивали, распродажи.
Море — #0E3B5C, #3FA7D6, #F4E9D8, #F28C38. Свежо и по-летнему: путешествия, яхты, отдых.
Тёмный премиум — #121212, #2A2A2A, #C9A86A, #EDE6DA. Сдержанно и дорого: рестораны, недвижимость, ювелирные украшения.
Частые ошибки
Все цвета яркие. Когда кричит всё, не слышно ничего. Ярким должен быть только акцент.
Чистые «компьютерные» цвета. #FF0000 и #00FF00 выглядят резко. Чуть приглушённые оттенки смотрятся дороже.
Чистый чёрный на белом. Для текста лучше почти чёрный — например, #1B1530 или #222222: контраст остаётся высоким, а глаз не устаёт.
Новая палитра в каждом посте. Лента, где каждый пост своего цвета, не запоминается. Выберите палитру и держитесь её.
Акцент везде. Если выделено всё, не выделено ничего. Акцентный цвет — для одной-двух вещей на макете.
Как собрать палитру в «Макетике»
Откройте редактор и выберите формат: пост, сторис, презентацию или карточку товара.
Задайте фон основным цветом или мягким градиентом из двух соседних оттенков.
Плашки и второстепенные элементы окрасьте дополнительным цветом.
Акцентный цвет оставьте для одного элемента — кнопки, цены или ключевого слова.
Запишите HEX-коды палитры и используйте их во всех макетах, чтобы лента выглядела единой.
Готовые цветовые решения есть в шаблонах: можно взять понравившийся и заменить текст.