Как подобрать цвета для сайта?

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

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

Почему важно работать с цветом на сайте?

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

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

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

1. Использование большого количества цветов рискует превратить ваш сайт в картинку из фильма ужасов.
2. Слишком яркие цвета могут отвлечь клиента от основного содержания ресурса.
3. Бледный сайт, малое количество оттенков = невзрачность. Скорее всего, такой сайт не запомнится пользователю.

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

Как говорят исследования психологов, больше 80% людей принимают решение о покупке на основании восприятия цвета. Также цветовая палитра формирует узнаваемость и запоминаемость компании.

Для наглядности предлагаю рассмотреть пару примеров сайтов с хорошей цветовой гаммой и плохой:

Какие сайты из представленных более приятны глазу? Даже не обладая знаниями веб-дизайнера, можно подметить, что первые два сайта используют большое количество цветов, которые явно не сочетаются друг с другом. А веб-ресурсы №3 и №4 наоборот выдержаны в чётко подобранной, ограниченной несколькими цветами, цветовой гамме. Выглядит гармонично и креативно.

Цветовой круг и цветовые гармонии: что это такое и какие сочетания бывают?

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

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

Вторичные гаммы получаются путём смешивания первичных. Третичные — путём смешивания первичных и вторичных. 

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

Основные виды цветовых гармоний

Монохромная гармония

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

Как использовать: берётся 2-5 оттенков из одного сегмента круга. Можно взять несколько монохромных оттенков и один контрастный по отношению к базовому цвету.

Аналоговая гармония

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

Как использовать: проводим линию вдоль 2-3 ближайших оттенков, расположенных на линии круга.

Комплементарная гармония

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

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

Часто бывает недостаточно всего двух цветов. Потому специалисты добавляют к ним тёмные и светлые оттенки базовых цветов.

Триадная гармония

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

Как использовать: в центр круга помещаете равносторонний треугольник и за счёт его вращения образуете новую цветовую триаду.

Четверичная гармония

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

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

Если у вас нет опыта в веб-дизайне, рекомендуем не использовать более 3-х цветов в оформлении сайта. При этом следует придерживаться правила: Базовый цвет (60%) + Дополнительный цвет (30%) + Акцентный цвет (10%).

Например, на этом сайте белый — основной цвет, черный — дополнительный, а красный — акцентный.

Сервисы, которые помогут подобрать цвет

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

1. https://colorscheme.ru — ресурс позволяет работать с цветовым кругом и различными видами цветовых гармоний, которые мы рассмотрели ранее. Есть функция, которая покажет, как будет выглядеть страница сайта с выбранными цветами в тёмном и светлом вариантах. Также интересным инструментом является «Симуляция зрения»: сервис показывает, как будут видеть ваш сайт люди с нарушением восприятия цветов (дальтоники и т.п.).

2. https://color.adobe.com/ru/create/color-wheel — платформа от создателей фотошопа позволяет работать, как с традиционными комбинациями цветов, так и имеет множество фишек и дополнительных функций. Например, пользователь может сам создавать сочетания, делиться ими с другими, а также пользоваться цветовыми решениями других дизайнеров.

3. http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF — инструмент очень напоминает Сolorscheme, однако содержит чуть меньше функций. Интерфейс ресурса представлен полностью на английском языке. Интересная фишка: после выбора цветов можно запустить режим моделирования. Он позволяет увидеть, как выбранное цветовое решение будет выглядеть при различных режимах экрана.

4. https://palettegenerator.com/ — с помощью этого сайта можно сгенерировать палитру из загруженного вами изображения. Например, если вы подобрали фото на страницу своего сайта, этот инструмент поможет подобрать гармоничное сочетание цветов для оформления ресурса, где будет размещено фото. Также инструмент может пригодиться, если у вас уже есть логотип бренда, и вам нужно разработать официальный сайт, сочетающийся с ним.

5. https://www.degraeve.com/color-palette/ — сайт с функционалом, аналогичным PalleteGenerator. Отличается лишь способ загрузки изображения на платформу.

6. http://flatcolors.net/ — данный ресурс позволяет подобрать цвета для плоского дизайна. Выбрав палитру, можно загрузить её в Photoshop или Corel.

Что нужно учитывать при подборе цветов?

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

• ЦА (целевую аудиторию) вашего бизнеса;
• психологию восприятия оттенков пользователями.

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

Важны любые факторы: национальность, возраст, пол и т.д. Вы вряд ли сделаете сайт автосервиса в розовых тонах (если, конечно, это не автосалон, который специализируется только на женской аудитории). Но и не нужно исходить из стереотипов и клише. Если ЦА только женщины, это не значит, что сайт должен быть обязательно розовым.

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

Ошибки в подборе цвета для сайта 

1. Использование большой цветовой палитры. Не стоит использовать больше 3-х цветов на вашем сайте. Пёстрое полотно очень сложно для восприятия.
2. Отсутствие контраста. Нужно выбрать основной цвет, который выделяется на фоне других. Если этого не сделать, то дизайн рискует выглядеть скучным. Также при отсутствии контраста тяжело читать текст.
3. Создание дизайна сайта без учёта психологии восприятия и специфики ЦА бренда. Цветовое решение сайта должно вызвать правильные эмоции. К примеру, если это сайт, посвящённый услугам клининга, то рационально будет использовать белые, голубые оттенки, символизирующие свежесть и чистоту.
4. «Грязные цвета» на сайте. Грязные цвета — все смешанные оттенки. К примеру, земляные, коричневые. Используя их, вы рискуете вызвать неприятные ощущения у посетителя.
5. Использование нескольких доминирующих цветов. Если на сайте несколько ярких и кричащих оттенков, вы вряд ли сможете расставить акценты. Пользователю будет сложно правильно понять то, что вы хотите донести ему на вашем ресурсе.
   

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