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

Почему важно правильно выбрать цвета?

Потому что именно цветовая гамма - первое, на что обращает внимание посетитель сайта. Удобная навигация, функционал, содержимое сайта, ассортимент товаров - это все тоже важно, но потом.

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

Итак, если вы веб-дизайнер, ваша задача - донести до заказчика следующие мысли:

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

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

3. Каждый цвет вызывает определенную эмоциональную реакцию. Ярко-красный - энергию, силу, страсть. Бледно-розовый - нежность, мягкость. Фиолетово-черный наводит на мистические, загадочные ассоциации.

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

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

6. Если у клиента уже есть фирменный стиль - отлично. Тогда сайт тоже должен быть выдержан в корпоративных цветах.

7. Если нет - проанализируйте, какие цвета используют конкуренты. Мы не призываем копировать удачный дизайн, ни в коем случае. Но основные цвета, их сочетание, оформление различных элементов сайта вполне можно доработать под клиента. Если ему понравится, конечно.

Выбираем цветовую гамму: пошаговая инструкция

Шаг 1. Выбираем основной цвет

Анализируем целевую аудиторию сайта. Составляем ее портрет. Лучше всего, если это будет рисованный персонаж: например, женщина по имени Ольга, 25 лет. Высшее образование. Проживает в крупном российском городе. Ожидает или планирует малыша. Готова тратить на покупки 10 тысяч рублей в месяц.

Теперь дело за малым: представить, какой цвет будет наиболее приятен этой милой женщине, какие эмоции он у нее вызовет. Нежный, пастельный, бледно-розовый - то, что надо.

Возьмем другой пример: сайт по продаже спортивных товаров. Тут уже будет другой персонаж: скажем, Алексей, 30 лет, увлекается спортом и туризмом, тратит крупные суммы единоразово и по мелочи - постоянно. Конечно, нежные приглушенные тона Алексею не подойдут. Скорее всего, такой человек любит скорость, драйв, адреналин. Можно сделать ставку на основной красный или зеленый цвет.

А что делать, если целевая аудитория делится на много сегментов? Допустим, вы продаете одежду для всей семьи - то есть вашей ЦА являются и мужчины, и женщины? Тогда можно комбинировать основные цвета. Например, красный и пастельный, зеленый и бледно-золотой.

Где будет использоваться основной цвет?

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

Шаг 2. Выбираем акцентные цвета

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

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

• красный и черный - динамика, агрессия, такое сочетание не остается незамеченным. Черный только усиливает яркость красного;
• красный и белый - совсем другое дело. Белый смягчает красный цвет, добавляет чистоты и свежести;
• красный и серый - отличное элегантное сочетание;
• красный и золотой - респектабельность, лакшери, богатство;
• красный и зеленый - слишком ярко, привлекает внимание, но режет глаз. Особенно если цвета не приглушенные, а кислотные;
• и так далее.

Где используются акцентные цвета?

Эти дополнительные цвета подойдут для оформления деталей: кнопок СТА, заголовков статей или карточек товаров, названий разделов меню. В скриншоте ниже таким дополнительным цветом является оранжевый.

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

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

Adobe Color CC

Сервис Adobe Color - это расширение, встроенное в старый добрый Photoshop. С его помощью можно создавать различные цветовые комбинации, просматривать популярные цветовые темы, сохранять найденное в своих темах или в Photoshop. В этом сервисе имеется как стандартные решения (например, монохромность, соединение и триада), так и множество дополнительных фишек и функций. Пользоваться могут как новички, так и опытные веб-дизайнеры.

Color Safe

Эта программа - не просто цветовая палитра. Сервис основан на рекомендациях Руководства по обеспечению доступности веб-контента (WCAG). Например, большое внимание уделяется правилу сохранения цвета на переднем плане, коэффициенту контрастности. Если вы пока не слышали об этом - изучайте матчасть, WCAG вам в помощь!

Check my Colours

Полезнейший инструмент, который не просто подбирает идеальное сочетание цветов, но и оценивает их комбинации. Например, насколько хорошо они сочетаются, есть ли у них достаточный контраст и так далее. Понятно, что на глазок даже профессиональному веб-дизайнеру оценить это трудно. А с помощью специальных алгоритмов, рекомендованных World Wide Web Consortium, - запросто!

Paletton

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

Adobe Kuler

Онлайн-конструктор цветовых схем позволяет создавать цветовые палитры на любой вкус или использовать уже созданные шаблоны - в разделе Explore - и дополнять их по вашему желанию. Есть свое сообщество, где можно делиться опытом. Важный момент: все созданные палитры сохраняются в личном кабинете на сайте Adobe.com. Для этого, понятное дело, нужно зарегистрироваться на сайте и получить свой ID.

The Color App

Для тех, кто не мыслит жизни без айфона, этот iOS-инструмент просто необходим. Огромная цветовая палитра, RGB, HEX и HSLA-значения цветов, и конечно, возможность создавать и сохранять цветовые палитры.

Contrast-A

Довольно сложный сервис, который основан на классических принципах дизайна и отличается основательным подходом. Этот инструмент анализирует, как цвета воздействуют друг на друга. Например, как относится канал яркости (Luminance Ratio) и отличия в яркости и цвете. Лучше всего этот инструмент подойдет, если перед веб-дизайнером стоит задача создать минималистичный сайт с небольшим количеством цветов.

Color Hunter

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

ColorZilla

Это даже не сервис, а плагин для Chrome и Firefox. С его помощью можно прямо в браузере решить разнообразные задачи по подбору цвета: например, определить значения цветов, отличия между ними, создать нужную цветовую гамму. А еще можно выбрать используемые цвета на странице, которая открыта в браузере.

Colorotate

Необычный ресурс, который показывает цветовую палитру не в виде круга, как обычно, а в виде трехмерного конуса. Инструмент позволяет создавать, редактировать и сохранять созданные палитры. Сервис работает как самостоятельно, так и в связке с Adobe Photoshop. Есть также в виде приложения для iPad.

ColorScheme

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

Чем еще хорош ресурс - здесь много полезных материалов для веб-дизайнера по выбору цвета. Можно существенно повысить уровень знаний!

Colourcode

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

Palettr

В этом сервисе вы не выбираете цвета вручную по разным типам. Палитра генерируется на основе определенных параметров: например, задаете выбранную тему (осень, весна, лето), город (Нью-Йорк, Париж, Рим) и так далее. Кстати, такие решения пользуются популярностью у заказчиков сайтов.

Material Design Palette

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

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

Студия IDBI поможет вам правильно подобрать цветовую палитру сайта с учетом его тематики и целевой аудитории. Наши работы доступны в разделе «Портфолио». Обращайтесь, обсудим задачу!