Руководство по разработке цветовой палитры сайта

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

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

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

Выбор цвета

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

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

После необходимо определиться с его оттенком. Для этого мы воспользуемся Color Picker Photoshop. Открываем PSD файл нашей палитры, перед нами появляется папка со слоями “*Change colors here”. Далее делаем двойной клик по первому слою, после делаем двойной клик на треугольном слое, вследствие чего появляется Color Picker.

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

Палитра цветов

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

Тона

Изменение насыщенности

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

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

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

Палитра

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

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

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

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

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

Палитра с вторичным цветом

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

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

Для этого воспользуемся приложением Adobe Color. Установим наш основной цвет в качестве базового и посмотрим Триаду.

сервис Adobe Color


Образцы цветовКак видно, и фиолетовый, и оранжевый цвета замечательно сочетаются с зеленым. В примере выбран оранжевый, потому как он имеет хорошее сочетание с темно-коричневым цветом. Далее мы копируем hex-код, предлагаемый Adobe Color, и вставляем его в Photoshop color picker. Он укажет, какой тон будет верным, но выбрать стоит более акцентирующий. Сохраняем и сравниваем три цвета.

Шаг 4. Выбираем цвет заднего фона

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

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