Теория цвета для дизайнеров, часть 3: Создаем собственную цветовую схему

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

Ну что же, это случится как раз в этой статье! Сегодня мы расскажем о различных способах разработки собственных цветовых схем с нуля. Мы охватим как традиционные модели цветовых схем (монохромные, схожие, комплементарные и так далее), так и процесс создания собственных цветовых схем, которые не схожи с традиционными. К концу этой статьи у Вас уже будут навыки и необходимые для создания собственных схем инструменты, которые Вы сможете применять при разработке собственных проектов. Наилучшим способом выработки навыков считается практика. Так почему бы не задаться целью создания новой цветовой схемы каждый новый день?

— Краткий обзор

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

Во второй части вы охватили терминологию цветов: Оттенок (Hue) – (синий, зеленый, красный и так далее); Цветность (Chroma) – уровень цветности (уровень содержания примесей); Насыщенность (Saturation) – уровень отображения оттенка по соотношению слабый/сильный; Значение (Value) – уровень яркости цвета; Тональность (Tones) – уровень содержания серого оттенка в цветах; Тени (Shades) – уровень содержания черного оттенка в цветах; Подцветка (осветления / Tints) – уровень содержания белого оттенка в цветах. Это очень важные пункты, которые нужно знать для того, чтобы успешно двигаться дальше и дойти до процесса создания собственных цветовых схем.

— Традиционные модели цветовых схем

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

цветовое «колесо»

Основа – цветовое «колесо» поделенное на 12 долей. Это очень важный элемент при создании цветовых схем.

Монохром

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

Примеры:

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

Схожие

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

Примеры:

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

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

Еще один пример схожей цветовой схемы.

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

Комплементарные схемы

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

Примеры:

Широкий спектр осветлений, теней и тональностей делает данную схему очень универсальной.

Еще одна комплементарная схема с широким диапазоном уровней цветности.

И не забывайте, что бежевый и коричневый – это на самом деле затемненный или осветленный оранжевый цвет.