Цвет: палитры, контраст, настроение

Цвет начинается с задачи

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

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

Цветовой круг и сочетания

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

Сочетание	Как устроено	Впечатление
Монохромное	Оттенки одного цвета: светлый, средний, тёмный	Спокойно, цельно
Аналоговое	Соседние цвета на круге: жёлтый, оранжевый, красный	Мягко, гармонично
Дополнительное	Цвета напротив друг друга: оранжевый и синий	Ярко, контрастно

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

Палитра кофейни «Утро»

Роль	Цвет	HEX	Где используем
Фон	Молочный	#F6EFE6	Фон постов, меню, стаканов
Текст	Кофейный	#3B2A20	Весь текст, логотип
Акцент	Рассветный оранжевый	#E8833A	Плашки с акциями, детали логотипа
Нейтральный	Тёплый серый	#B8A99A	Линии, рамки, фоновые узоры

HEX — запись цвета для экрана: решётка и шесть символов. Её вводят в Figma и любых других программах.

Как распределить цвета на макете, подсказывает правило 60-30-10:

• 60% — основной цвет, обычно фон: молочный;
• 30% — второй цвет: кофейный текст и крупные элементы;
• 10% — акцент: оранжевый только там, куда нужно привлечь взгляд.

Акцент работает, пока его мало. Если сделать половину афиши оранжевой, он перестанет выделять «Второй кофе в подарок» — всё станет одинаково громким.

Контраст и читаемость

Красивая палитра бесполезна, если текст на ней не читается. Контраст — разница в яркости между текстом и фоном — измеряется отношением, например 4,5 : 1. Принятый ориентир для экранов:

• обычный текст — не меньше 4,5 : 1;
• крупный текст, например заголовки, — не меньше 3 : 1.

Проверим палитру «Утра»:

Текст	Фон	Контраст	Для мелкого текста
Кофейный	Молочный	11,97 : 1	Отлично
Кофейный	Оранжевый	5,03 : 1	Подходит
Оранжевый	Молочный	2,38 : 1	Нельзя
Белый	Оранжевый	2,71 : 1	Нельзя
Тёплый серый	Молочный	2,01 : 1	Нельзя

Вывод: оранжевый — для плашек и крупных элементов, а текст на оранжевой плашке пишем кофейным, а не белым. Белый на оранжевом выглядит привычно, но читается плохо. Проверить контраст можно в бесплатных онлайн-проверках контраста или плагинах для Figma.

Экран и печать

Цвета на экране и на бумаге получаются по-разному:

• экран светится и смешивает красный, зелёный и синий свет — это модель RGB, к ней относится и HEX;
• печать смешивает голубую, пурпурную, жёлтую и чёрную краски — это CMYK.

Часть ярких экранных цветов на бумаге получить нельзя: они выйдут тусклее. Поэтому для вывески и стаканов «Утра» оранжевый подбирают в CMYK отдельно, а перед большим тиражом делают пробную печать. В гайдлайне бренда указывают оба значения — для экрана и для печати.