Цветовая гамма сайта – как правильно выбрать

Цветовая гамма сайта

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

Содержание:

Теория цвета

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

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

Цветовой круг RYB

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

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

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

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

Цветовая гамма сайта – базовые правила

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

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

Это не будет плагиатом, а будет следование каким-то базовым принципам, которые применяют успешно другие люди.

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

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

Рекомендуется в своем проекте использовать только фиксированный набор цветов. Основной список цветов в проекте:

  • Основной цвет текста. Как правило, черный, либо его оттенки.
  • Основной цвет фона, например, белый.
  • Ключевой цвет проекта, с которым сайт в дальнейшем будет ассоциируется у посетителей.
  • Ключевой цвет проекта для эффекта наведения.
  • Дополнительный цвет проекта.
  • Цвет уведомлений. В этом случае, например:

– зеленый — благоприятный результат;

– желтый – предупреждение;

– красный — ошибка.

Следующее правило — при создании цветовой гаммы сайта, это использование специальных инструментов.

То есть, рекомендуется использовать готовые сервисы, а не выдумывать что-то самому, если при этом не являетесь профессионалом.

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

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

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

Цвет играет в дизайне, рисовании и в повседневной жизни очень важную роль.

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

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

Есть два способа применения теории цвета при создании сайта. Первый способ — сочетание контрастных цветов и облегчения читаемости.

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

Второй способ предполагает использование психологически опять же ассоциаций. Что это значит?

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

Поэтому с помощью различных цветовых сочетаний можно передать посетителю определенное послание.

Цвета, как бы, могут разговаривать и могут донести посетителю или клиенту ту информацию, которую требуется ему передать.

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

Прежде всего, надо определиться, какой продукт или услуга реализуется, то есть, какая идея сайта.

Второй момент – четко определить свою целевую аудиторию.

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

Например, для детского сайта подойдут теплые оттенки желтого, розового, оранжевого тонов.

Пастельные тона – голубой, бежевый, зеленый более подойдут для возрастной категории.

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

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

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

Заключение

На сайте должен, как правило, быть один основной цвет и два дополнительных. Все, больше цветов быть не должно.

Из этих трёх цветов можно делать множество оттенков, но новых цветов добавлять не рекомендуется.

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

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

Вопрос цвета частично затрагивался в статье — Как создать дизайн сайта. Посмотреть можно здесь.

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

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *