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

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

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

Отталкивайтесь от логотипа, а не от вкуса

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

На практике:

• Возьмите точный код цвета из логотипа (формат HEX, что-то вроде `#1B4D3E`). Если его нет, тот, кто делал логотип, пришлёт его за две минуты.
• Используйте его для фирменных элементов: логотип в шапке, важные заголовки, линии, разделяющие секции.
• Не ставьте его повсюду. Фирменный цвет, покрывающий весь экран, утомляет глаз и перестаёт что-либо выделять.

Если логотипа ещё нет, сначала выберите подходящий вам цвет (см. ниже), а потом стройте логотип вокруг него. Порядок важен.

Что на самом деле «говорит» цвет

Психология цвета реальна, но это не магия. Круассан не продастся лучше только потому, что он на коричневом фоне. Цвет важен, потому что задаёт ожидание в первую секунду, до того как кто-то прочитает хоть слово.

• Синий — доверие, спокойствие, серьёзность. Поэтому его используют банки, клиники, IT- и бухгалтерские фирмы.
• Зелёный — природа, здоровье, баланс. Подходит для кабинетов, органических продуктов, услуг по уходу, садоводства.
• Красный — энергия, срочность, аппетит. Мощный для еды и акций, но утомляет, если покрывает всё.
• Оранжевый / жёлтый — дружелюбный, доступный, оптимистичный. Хорош для услуг, которые хотят казаться доступными, а не дорогими.
• Чёрный / золотой — роскошь, премиум, эксклюзивность. Салоны, ювелирные изделия, дорогие нишевые услуги.
• Розовый / пастель — мягкость, женственность, забота. Косметика, мероприятия, услуги для детей.

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

Палитра, которая вам нужна: три роли, а не десять цветов

Сайту, который приносит клиентов, не нужна радуга. Ему нужны три чёткие роли:

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

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

Контраст: где тихо исчезает большинство продаж

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

Простые правила:

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

Доступность — не прихоть, это разница между клиентом, который звонит, и тем, кто закрывает страницу.

Ошибки, заметные мгновенно

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

Когда мы строим сайт, мы не начинаем с «какой цвет вам нравится». Мы начинаем с логотипа, с того, что вы продаёте, и с кнопки, которая должна выделяться. Остальная палитра сама выстраивается вокруг этих трёх вещей. Если хотите увидеть, как выглядел бы ваш бизнес со связной палитрой — не описанной, а построенной, — напишите нам в WhatsApp, и мы бесплатно сделаем демо вашего сайта в ваших цветах.

👉 Напишите нам в WhatsApp и получите бесплатное демо.

По бюджетам и пакетам смотрите также сколько стоит сайт или зачем мне нужен сайт.