Как выбрать цветовую гамму для сайта компании

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

С чего начинать: фирменный стиль и позиционирование

Если у компании уже есть логотип и фирменные цвета, палитра сайта строится вокруг них. Задача дизайнера — не придумать всё заново, а адаптировать айдентику к интерфейсу: подобрать оттенки для фона, текста, кнопок, ссылок, состояний наведения и ошибок.

Если фирменного стиля нет, начинать стоит не с «любимого цвета директора», а с ответов на несколько вопросов:

• Кто ваши клиенты и чего они ждут — надёжности, экспертности, заботы, яркости, премиальности?
• Какие цвета используют ближайшие конкуренты и нужно ли от них отстроиться?
• Где ещё будет жить бренд — вывески, упаковка, униформа, соцсети?
• Какое впечатление компания хочет производить через несколько лет, а не только сейчас?

Ответы задают направление. Например, клиника эстетической медицины и автосервис могут оба выбрать синий, но это будут совершенно разные синие: мягкий пудровый в первом случае и насыщенный технический — во втором.

Психология цвета: работает, но без магии

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

Цвет	Типичные ассоциации	Где часто уместен
Синий	Надёжность, спокойствие, профессионализм	Финансы, IT, медицина, B2B-услуги
Зелёный	Природа, здоровье, рост, экологичность	Фермерские продукты, аптеки, ландшафт, эко-товары
Красный	Энергия, срочность, страсть	Акценты, распродажи, общепит, спорт
Оранжевый и жёлтый	Дружелюбие, оптимизм, доступность	Детские товары, доставка, развлечения
Чёрный и тёмно-серый	Премиальность, строгость, стиль	Мода, люкс, архитектура, дизайн
Бежевый и тёплые нейтральные	Уют, натуральность, мягкость	Интерьеры, мебель, косметика, кафе

Важнее конкретного цвета — согласованность. Если сайт юридической компании сделан в кислотных тонах, посетитель почувствует диссонанс, даже не формулируя, в чём дело.

Правило 60–30–10: как распределить цвета

Одна из самых практичных схем для интерфейсов — распределение по пропорции 60–30–10:

1. Около 60% — основной, нейтральный цвет. Обычно это фон: белый, светло-серый, тёплый молочный или, для тёмных тем, глубокий графит.
2. Около 30% — вторичный цвет. Блоки, подложки, шапка, подвал, иллюстрации. Он поддерживает фирменный стиль, но не спорит с контентом.
3. Около 10% — акцентный цвет. Кнопки, ключевые ссылки, значки, важные цифры. Именно он направляет внимание к целевым действиям.

Главная ошибка — сделать фирменный яркий цвет фоном всего сайта. Тогда кнопкам нечем выделиться, текст читается хуже, а глаза устают. Яркий цвет лучше работает дозированно: как сигнал «сюда».

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

Красивая палитра бесполезна, если текст на ней трудно читать. Светло-серый текст на белом фоне, белые буквы на жёлтой подложке, мелкий текст поверх фотографии — классические примеры, которые выглядят «воздушно» в макете и мучают людей на реальных экранах.

• Основной текст делайте тёмным на светлом фоне или светлым на тёмном, с достаточным контрастом. Существуют рекомендации по доступности, где минимальное соотношение для обычного текста — 4,5 к 1; проверить его можно в бесплатных онлайн-калькуляторах контраста.
• Не используйте чисто чёрный текст на чисто белом для длинных статей — мягкий тёмно-серый чуть комфортнее для глаз, при этом контраст остаётся высоким.
• Текст поверх фотографии размещайте на затемняющей подложке или в зоне с однородным фоном.
• Не передавайте важную информацию только цветом: ошибку в форме подписывайте словами, а не только красной рамкой. Заметная часть людей, особенно мужчин, плохо различает красный и зелёный.

Как собрать палитру на практике

Шаг первый: выберите базовый цвет

Это фирменный цвет или оттенок, который лучше всего отражает позиционирование. От него строится всё остальное.

Шаг второй: постройте шкалу оттенков

Для интерфейса одного оттенка мало. Нужны светлые версии для подложек, тёмные — для наведения и активных состояний. Обычно делают шкалу из пяти–десяти ступеней от почти белого до насыщенного тёмного.

Шаг третий: добавьте нейтральные

Серые или слегка тонированные нейтральные цвета для текста, рамок, разделителей и фона. Хороший приём — «подкрасить» серые в оттенок основного цвета, чтобы палитра выглядела цельной.

Шаг четвёртый: определите служебные цвета

Зелёный для успешных действий, красный для ошибок, жёлтый для предупреждений. Их используют редко, но задать заранее нужно, чтобы не придумывать на ходу.

Шаг пятый: проверьте на макете

Образцы цвета в виде кружков на белом листе мало что говорят. Палитру нужно примерить на реальные экраны: главную, страницу услуги, форму заявки, мобильную версию. Часто оказывается, что акцент слишком агрессивен на больших площадях или, наоборот, теряется рядом с фотографиями. Лучше сделать два–три варианта и сравнить их рядом, чем утверждать единственный.

Цвет и фотографии

Палитра сайта не существует отдельно от изображений. Если на сайте много фотографий продукции, интерьеров или команды, они вносят свои цвета, и интерфейс должен с ними уживаться. Поэтому в проектах с насыщенным визуальным контентом фон и подложки обычно делают максимально спокойными, а фирменный цвет оставляют для кнопок и небольших элементов.

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

Типичные ошибки

• Слишком много цветов. Пять–шесть ярких оттенков на одной странице создают хаос. Обычно хватает одного основного, одного акцентного и нейтральных.
• Разные оттенки одного цвета. Три разных синих на кнопках разных страниц выглядят как ошибка, а не как задумка.
• Выбор «по настроению». Цвет, который понравился на картинке из интернета, может плохо работать с вашим логотипом и контентом.
• Проверка только на своём мониторе. Цвета заметно меняются на дешёвых экранах ноутбуков и смартфонах, особенно при ярком солнце.
• Тёмная тема без продумывания. Просто инвертировать цвета нельзя: насыщенные оттенки на тёмном фоне «кричат», их нужно приглушать.

Вывод

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

Дизайнеры «Студии-125» подбирают палитру с учётом бренда, ниши и задач сайта — будь то новый корпоративный сайт или обновление существующего в рамках редизайна. Напишите нам, и мы предложим несколько вариантов цветовых решений на реальных экранах вашего будущего сайта.