Выбор цветовой палитры сайта

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

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

Выбор главного цвета

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

Определившись с цветом, стоит подобрать наиболее подходящий оттенок. Удобно это сделать в Photo Shop, инструментом Color Picker. Здесь мы можем увидеть тон, светосилу(контраст) и насыщенность, регулируя эти параметры, мы сможем получить желаемый цвет.

Color Picker

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

Color Picker

На фото показана условная зона выбора оттенка цвета. После выбора цвета, стоит сохранить его в RGB и Hex формате.

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

Вторичный цвет

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

Посмотрим как эти цвета сочетаются с основным цветом и выберем наиболее подходящий.

Сочетание желтого и фиолетового цветов

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

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

С помощью сервиса Adobe Color выберем активный цвет. Выберем желтый цвет в качестве основного и с помощью “треугольника” выберем подходящий активный оттенок.

Adobe Color

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

Выбор цвета фона

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

Собранная палитра сайта

До конца собранная палитра