Серый цвет многозначен. Он выступает хорошим фоном для более ярких цветов или текстур, но и главенствовать в айдентике тоже способен. Подобрать небанальное сочетание с серым — задача не из простых. В статье на примерах покажем, с чем он гармонично сочетается и когда может выступать полноценным героем.
Содержание
Популярен ли серый в дизайне (и почему да)
Серый занимает особое место в графическом дизайне, UX-дизайне и айдентике, являясь одним из самых востребованных нейтральных цветов.
В психологии серый цвет интерпретируется как сбалансированный, успокаивающий. Его темные оттенки создают атмосферу серьезности и надежности, что особенно ценно при разработке деловой документации, корпоративных материалов и бизнес-брендинга.
Акцентная функция серого заключается в его способности подчеркивать яркие элементы дизайна. На сером фоне другие цвета выглядят более насыщенными и заметными, что активно используется при создании рекламных материалов и визуальных композиций.
Минимализм — ключевое направление, где серый цвет особенно популярен. Он помогает сделать визуал аккуратным. Это касается дизайна во всех проявлениях: и брендингового, и интерьерного.
Городская эстетика также неразрывно связана с серым цветом. Он прекрасно передает атмосферу мегаполисов и урбанизма, что активно используется в айдентике городских сервисов и услуг.
Балансирующая роль светлых оттенков серого позволяет создавать гармоничные композиции, способствующие восприятию информации. Это особенно важно при разработке веб-сайтов, приложений и печатной продукции.В целом серый цвет является мощным инструментом в руках дизайнера, позволяющим создавать как строгие деловые решения, так и минималистичные композиции, что делает его незаменимым элементом в графическом дизайне и айдентике.
50 оттенков: основные принципы сочетания серого цвета с другими
Светло-серый фон оптимально сочетается:
- С бордовыми оттенками.
Это сочетание часто используется в интерьерах. Пропорции цветов: 60–70% светло-серого как основного, 20–30% бордового как акцентного, 10% дополнительных цветов (при необходимости).
В типографике процентное соотношение будет другим. Используйте высококонтрастное сочетание бордового цвета на черном фоне для заголовков и ключевых сообщений, светло-серый для основного текста и контрастные элементы для выделения важной информации.
2. Изумрудными тонами.
Композиция из светло-серого и изумрудного выглядит сдержанно и благородно.
Это айдентика для компании, которая занимается массажем верховых лошадей после скачек и тренировок. Серый цвет отсылает к слабости и нездоровью, после чего идет мягкий градиент, переходящий в изумрудный — цвет здоровья и благополучия. Тут и природная ассоциация (изумрудный цвет напоминает о растительном мире), и спокойная элегантность — светло-серый уравновешивает яркость изумрудного.
3. Оттенками синего.
Компания, которая занимается ресторанным обслуживанием на яхтах.
Темно-серый фон эффектно смотрится:
- С лимонно-желтыми оттенками.
Каталог Первой российской молодежной архитектурной биеннале отсылает к распространенному сочетанию цветов на дорожной разметке. Впоследствии стиль повторяется во всем брендинге биеннале.
Страница из брендбука Nota Group — бухгалтерской компании, которой по направлению очень подходят и деловой цвет «мокрый асфальт», и ассоциации с серебром и золотом.
2. Мятными тонами.
Мятный — пастельный цвет, поэтому он всегда хорошо выглядит рядом с другими приглушенными и нейтральными.
Бренд эспрессо TYO. Если обычно для кофейных упаковок используют теплые, естественные оттенки и кофейные тона, то тут дизайнеры поступили наоборот.
Наиболее подходящие отрасли для использования в айдентике: косметические бренды, wellness-индустрия, экологические проекты, медицинские услуги. Такое сочетание особенно эффективно для создания бренда, который хочет подчеркнуть свою бодрость и энергичность, сохраняя при этом деловой вайб без легкомыслия.
3. Пастельно-розовыми или ярко-розовыми цветами.
Серый и розовый создают мягкое, но выразительное сочетание, баланс между спокойствием серого и энергией розового.
Для продуктов, которые выставляются на полках, важно быть заметными. За это отвечает в том числе кричащий розовый. Серая графика сбавляет накал.
Оптимальные сочетания по оттенкам серого
- Светло-серый (#D3D3D3):
- бордовый
- темно-зеленый
- фиолетовый
Подходят для веб-дизайна и презентаций.
2. Средне-серый (#808080):
- ярко-желтый
- электрик
- коралловый
Подходят для текстиля и интерьерных решений.
3. Темно-серый (#404040):
- лимонный
- мятный
- пастельно-розовый
Подходят для ландшафтного дизайна.
Как выглядит пошаговый процесс выбора контрастных оттенков:
Определите точный оттенок серого и сравните, подходит ли он по контексту, то есть для ваших целей. Протестируйте цвет в реальных условиях и адаптируйте под свои задачи.
Совет дизайнеру: тестируйте сочетание не на глаз, а через инструменты — Figma, Contrast plugin, Stark. Если используете серый как подложку, то помните о важности контраста, особенно в UX- и UI-дизайне, иначе пользователь просто не разглядит вашу кнопку, от чего, соответственно, упадет конверсия. Контраст должен быть минимум AA (средний) по WCAG (Web Content Accessibility Guidelines).
Стоит помнить:
- Минимальный уровень контраста для комфортного восприятия — 4,5:1.
- Учитывайте особенности освещения, если речь идет о дизайне интерьеров.
- Соблюдайте иерархию акцентов (основной плюс 1–2 дополнительных цвета).
Совет дизайнеру: если серый используется в графике, нужно контролировать светлоту. Если потом проект пойдет в печать, он может выглядеть не так, как на экране, а грязно-коричневым. Лучше всего для этого использовать CMYK-превью (Cyan, Magenta, Yellow, Key или Black). Эта модель используется специально для печати.
Чего следует избегать
Не используйте слишком много контрастных цветов. Обязательно проверяйте выбранный вариант при разном освещении (или разных настройках монитора).
Коварство серого: как использовать его в UX-дизайне
Как уже упоминалось, слишком светлый серый не подходит для форм, кнопок и CTA (Call To Action). Придерживайтесь правил:
- Активная кнопка всегда должна быть заметнее остального текста.
- Если текст серый, то он не должен быть бледным — просто второстепенным.
- Если используете серый для ссылок, они также не должны сливаться с фоном.
- В формах, где кнопки неактивны, серый работает хорошо — он как бы говорит пользователю: это пока не активно, но будет важно.
