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

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

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

С чего начинать: бренд, аудитория, задача сайта

Прежде чем открывать генератор палитр, ответьте на три вопроса. Без них любой выбор будет случайным.

  1. Что уже есть у бренда. Логотип, фирменные цвета, упаковка, офлайн-материалы. Если компания существует давно, сайт должен узнаваться рядом с визитками и вывеской. Резко уходить от фирменного цвета стоит только при ребрендинге.
  2. Кто аудитория. Топ-менеджеры промышленных предприятий и подростки, покупающие кроссовки, реагируют на разные цветовые решения. Возраст, привычки, контекст использования (за рабочим столом или на ходу) влияют на то, какая яркость и насыщенность уместны.
  3. Какое действие вы хотите получить. Заявка, покупка, звонок, подписка. От этого зависит, какой цвет станет акцентным и как он будет работать на кнопках.

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

Из чего состоит рабочая палитра

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

Основной цвет

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

Акцентный цвет

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

Нейтральные цвета

Фоны, текст, линии, границы карточек. Именно нейтральные занимают большую часть площади страницы, поэтому от их качества зависит ощущение чистоты и профессионализма. Чисто чёрный текст на чисто белом фоне даёт избыточный контраст и утомляет; чаще используют тёмно-серый или графитовый с лёгким оттенком в сторону основного цвета.

Семантические цвета

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

Правило 60-30-10 и распределение площадей

Классический ориентир из интерьерного дизайна отлично работает и в вебе. Около шестидесяти процентов площади занимает доминирующий нейтральный фон, тридцать процентов — вторичный цвет (блоки, карточки, подвал, подложки), десять процентов — акцент.

Смысл правила в дисциплине: акцент ценен, пока его мало. Если оранжевым выделены кнопки, ссылки, иконки, бейджи и половина заголовков, глаз перестаёт понимать, что главное. Хорошая проверка: прищурьтесь или размойте макет. Должно остаться понятным, где находятся два-три самых важных элемента, и обычно это акцентные кнопки.

РольДоля площадиГде применяется
Доминирующий фоноколо 60 %Основной фон страниц, области чтения текста
Вторичный цветоколо 30 %Карточки, секции-подложки, шапка, подвал
Акцентоколо 10 %Кнопки, ключевые ссылки, важные метки

Как подобрать сочетания: схемы, которые работают

Цветовой круг помогает не гадать, а строить гармоничные пары. Практически для бизнес-сайтов хватает нескольких схем.

  • Монохромная. Один оттенок в разных светлотах и насыщенностях. Строго, спокойно, подходит для юридических, финансовых, инженерных компаний. Риск: акценту не из чего выделяться, поэтому приходится добавлять один контрастный цвет для кнопок.
  • Аналоговая. Соседние цвета круга, например сине-зелёный и зелёный. Мягко и естественно, хорошо для медицины, экологичных продуктов, образования.
  • Комплементарная. Противоположные цвета: синий и оранжевый, фиолетовый и жёлтый. Максимальная заметность акцента. Использовать нужно дозированно: большая площадь обеих красок даёт вибрирующий, нервный эффект.
  • Триадная. Три равноудалённых цвета. Живо и дружелюбно, но требует опыта: легко получить детскую открытку. Уместна для креативных проектов и сервисов для молодой аудитории.

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

Контраст: где красота встречается с законом физики

Самая частая причина провала красивой палитры — нечитаемый текст. Светло-серый на белом выглядит изысканно на мониторе дизайнера и превращается в туман на смартфоне под уличным солнцем.

Для проверки используют коэффициент контраста между цветом текста и фона. Рекомендации по доступности требуют не менее 4,5 к 1 для обычного текста и не менее 3 к 1 для крупного текста и значимых элементов интерфейса. Проверить значение можно в любом бесплатном инструменте для расчёта контраста, достаточно ввести два значения цвета.

Обратите внимание на типичные ловушки:

  • белый текст на жёлтой или светло-оранжевой кнопке: выглядит ярко, но контраст ниже допустимого;
  • серые подписи и плейсхолдеры в полях форм;
  • текст поверх фотографии без затемняющей подложки;
  • тонкие светлые шрифты на цветном фоне.

Подробнее о том, как сделать интерфейс удобным для всех, мы писали в материале про контраст и читаемость. Там же разобраны проверки на разных устройствах.

Совет студии. Проверяйте не только сочетание «текст на фоне», но и «кнопка на фоне». Если акцентная кнопка сливается с подложкой при взгляде со стороны, никакая рамка и тень этого не исправят. Меняйте светлоту цвета, а не только его оттенок.

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

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

  1. Значения зависят от культуры, отрасли и контекста. Красный в банковском приложении может означать убыток, а в интернет-магазине скидку.
  2. Сам по себе цвет не гарантирует рост конверсии. Решает сочетание цвета, контраста, расположения и текста кнопки.
  3. Конкуренты всё равно влияют на выбор. Если вся отрасль синяя, отстроиться можно не сменой цвета на розовый, а необычным сочетанием или другим подходом к насыщенности.

Если тема вам интересна глубже, у нас есть отдельный разбор психологии цвета в брендинге и веб-дизайне.

Как выбрать оттенки для всех состояний интерфейса

Здесь большинство самодельных палитр и ломается. Кнопка существует не в одном виде, а минимум в пяти: обычная, при наведении, при нажатии, неактивная и в фокусе при навигации с клавиатуры. Ссылка, поле ввода, переключатель, вкладка проходят похожий путь.

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

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

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

Тёмная тема и несколько режимов

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

Пошаговый процесс выбора палитры

Соберём всё в последовательность, по которой удобно работать с дизайнером или самостоятельно.

  1. Зафиксируйте ограничения. Фирменные цвета, запретные оттенки (например, цвета конкурентов), требования к печатным материалам.
  2. Соберите референсы. Пять-семь сайтов и визуальных примеров, которые нравятся и по настроению, и по структуре. Для каждого запишите, что именно нравится: сдержанность, контраст, глубина фона.
  3. Выберите основной цвет. Протестируйте его на логотипе, заголовках и крупных блоках. Оцените, как он выглядит на светлом и тёмном фоне.
  4. Подберите акцент. Он должен выделяться и на белом, и на вашем вторичном фоне. Проверьте контраст с текстом на кнопке.
  5. Постройте нейтральную шкалу. Фон, подложка, граница, второстепенный текст, основной текст. Добавьте в нейтральные лёгкий оттенок основного цвета для цельности.
  6. Добавьте семантические цвета. Подстройте их по насыщенности под общий стиль, но не уводите от узнаваемых значений.
  7. Проверьте на живых макетах. Главная страница, карточка услуги, форма, таблица, футер. Палитра должна выдержать самые скучные, функциональные экраны, а не только красивую обложку.
  8. Проверьте на разных устройствах. Телефон при ярком свете, старый монитор, режим снижения синего света. Реальные экраны искажают цвета.
  9. Зафиксируйте результат. Таблица значений, правила применения, примеры хороших и плохих сочетаний.

Типичные ошибки при выборе цветов

Слишком много цветов

Пять-шесть равноправных ярких оттенков на одной странице разрушают иерархию. Решение: сократить до одного основного, одного акцентного и нейтральных, а остальные использовать только в иллюстрациях и данных.

Акцент везде

Если «горит» всё, не горит ничего. Оставьте акцентный цвет только для действий и самых важных меток.

Цвет как единственный сигнал

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

Выбор по макету, а не по системе

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

Игнорирование фотографий и контента

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

Копирование конкурентов

Похожая палитра размывает бренд. Берите у конкурентов уроки по структуре и ожиданиям аудитории, но не копируйте цветовое решение.

Примеры решений для разных отраслей

Универсальных рецептов нет, но есть логика, которую можно применять к конкретному случаю.

  • Юридическая фирма. Глубокий тёмно-синий или графитовый, тёплые светлые нейтральные, сдержанный акцент (бордовый или золотистый). Задача: передать надёжность и собранность. В кейсе «Право и Дело» мы строили визуальный язык именно на сочетании строгости и человечности.
  • Клиника эстетической медицины. Светлые мягкие нейтральные, тёплый акцент, много воздуха. Холодный стерильный белый обычно отпугивает, а слишком яркие цвета снижают ощущение экспертности. Пример решения есть в кейсе клиники «Аура».
  • Логистика и промышленность. Насыщенный синий или зелёный как база, контрастный акцент для кнопок, высокий контраст текста. Здесь важны ясность и скорость восприятия, а не эмоции.
  • Интернет-магазин. Нейтральная сдержанная основа, чтобы товары выглядели ярче интерфейса, и один заметный цвет для кнопки покупки. Цвет цены и скидки выбирают отдельно, чтобы он не путался с кнопкой.
  • IT-сервис. Допустимы более смелые схемы, градиенты, тёмные подложки. Про аккуратное использование градиентов у нас есть отдельная статья «Градиенты в интерфейсах».

Как проверить, что палитра работает

Не оставляйте оценку на уровне «нравится или нет». Несколько практичных проверок помогут принять решение на фактах.

  • Тест пяти секунд. Покажите страницу пяти-семи людям из целевой аудитории на несколько секунд и спросите, что они запомнили и куда бы нажали. Если называют не ту кнопку, акцент работает неправильно.
  • Чёрно-белый режим. Переведите макет в оттенки серого. Иерархия должна сохраниться. Если кнопка пропала на фоне, проблема в светлоте, а не в оттенке.
  • Проверка контраста автоматическим инструментом. Пройдитесь по всем текстовым элементам и кнопкам.
  • Сравнение с конкурентами. Положите свой макет рядом с тремя-четырьмя сайтами отрасли. Вы должны быть узнаваемы и отличаться.
  • A/B-тест после запуска. Цвет кнопки редко даёт чудеса, но проверка гипотез на живом трафике полезна. Как проводить такие эксперименты, описано в материале про A/B-тестирование.

Что передать разработчику вместе с палитрой

Идеальная палитра на бумаге бесполезна, если разработчик получит только картинку. Для корректной реализации нужен компактный набор материалов.

  • Таблица цветов с названиями ролей (основной, акцент, фон, граница, текст) и значениями.
  • Шкалы оттенков для основного и акцентного цветов.
  • Правила состояний: наведение, нажатие, фокус, неактивное состояние.
  • Примеры допустимых сочетаний текста и фона с указанием коэффициента контраста.
  • Правила для иллюстраций, графиков и данных: сколько цветов допустимо и в каком порядке.

Такой набор уменьшает число правок на этапе вёрстки и помогает поддерживать единообразие, когда сайт растёт. Как устроены наши этапы работы, от макетов до запуска, можно посмотреть на странице «Этапы».

Когда нужна помощь профессионала

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

В студии Mevero выбор цвета входит в работу над веб-дизайном: мы разбираем бренд, аудиторию и конкурентов, предлагаем несколько направлений, показываем их на реальных экранах сайта, а не на абстрактных плашках. Для проектов, где нужно обновить внешний вид без смены структуры, подойдёт редизайн. Ориентиры по стоимости собраны на странице тарифов.

Итоги

Хорошая цветовая палитра сайта строится из нескольких простых решений. Начните с бренда, аудитории и целевого действия. Определите роли цветов: основной, акцентный, нейтральные и семантические. Следите за пропорциями, чтобы акцент оставался заметным. Обязательно проверьте контраст и убедитесь, что информация не передаётся только цветом. Подготовьте шкалы оттенков и правила состояний, чтобы сайт мог расти без хаоса.

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