Знание азов теории цвета поможет создавать дизайн, на который не только приятно смотреть, но который помогает достичь цели.
Читайте полную версию статьи с примерами редактируемых шаблонов на сайте.
Посмотрите на этот антипример. Сложно назвать сочетание цветов гармоничным, согласны?
Внимание такой дизайн привлечет, скорее всего, запомнится, но едва ли поможет достичь цели — кликнуть на определенную ссылку, например.
В этой статье мы расскажем о шести основных моментах теории цвета, которые помогут сочетать цвета так, чтобы получился тот, дизайн, который создаст нужное настроение и привлечет внимание к главному.
Начнем с основы теории цвета — разберемся, что такое цветовой круг и зачем он нужен. Вы научитесь сами подбирать сочетания под разные задачи. Покажем на примерах, что такое хроматические и ахроматические цвета, температура, тень, оттенок и тональность цвета. И расскажем, как при помощи этих знаний самостоятельно создать гармоничный, яркий, спокойный или дерзкий дизайн.
1. Что такое цветовой круг
Цветовой круг — основа теории цвета, которая включает в себя все цвета. Есть две версии цветового круга: RYB и RGB.
RYB — это модель, основанная на трех основных цветах: красном, желтом и синем. Смешивая эти цвета можно получить все остальные в физическом мире. Эта модель отображена на цветовом круге Иттена, которым пользуются художники.
Модель RGB построена на других трех основных цветах: красном, зеленом и желтом. Именно они нужны, чтобы получить все остальные цвета в диджитал-дизайне, то есть на экранах смартфонов, компьютеров и телевизоров. В этой модели смешивается свет, а не краски.
Если в RYB при смешении всех трех основных цветов получается черный, то в RGB — белый. Как это возможно, подробно показано в видео Pasco Scientific.
В каждой модели есть основа — три цвета, их еще называют первичными. В каждом круге есть еще и вторичные цвета — они получаются при смешении основных. А есть и третичные — они получаются, если смешать один первичный и один вторичный соседний цвет.
2. Зачем нужен цветовой круг
Круг нужен для того, чтобы подбирать подходящие сочетания цветов. Есть пять видов комбинаций:
Монохроматические — оттенки одного цвета. Например, синий, голубой и светло-голубой. Если цвета расположены последовательного от самого темного к самому светлому, то получается градиент, как в деревянной пирамидке OhHappyTree.
Аналогичные — цвета-соседи по кругу, максимально близкие друг к другу. Например, красный и оранжевый.
Комплементарные — противоположные, то есть максимально непохожие друг на друга цвета. Например, синий и оранжевый.
Триадные — это три одинаково удаленных друг от друга цвета, которые можно соединить треугольником. Это тоже контрастные сочетания, но разница между цветами меньше, чем в случае комплементарных.
Тетрадные — четыре цвета, которые можно соединить на круге четырехугольником. Два из них противоположные, это комбинация для яркого дизайна, которую лучше использовать опытным дизайнерам.
На цветовом круге Canva можно самостоятельно найти все сочетания цветов. Подробно о сочетаниях, с примерами из фильмов, рекламы и живописи, а также советами в каких случаях их использовать, мы рассказали в статье о цветовом круге.
3. Хроматические и ахроматические цвета
Все цвета делятся на две категории — хроматические и ахроматические. К хроматическим относятся красный, желтый, оранжевый, зеленый, синий, фиолетовый и все их смеси. К ахроматическим — черный, белый и весь спектр серого между ними.
Черно-белый дизайн без использования других цветов — беспроигрышный вариант для стильного оформления.
Человек может различить около 400 переходных оттенков от белого к черному.
Черный и белый, вместе или по одному, помогают сделать акцент на любом хроматическом, в этом случае их можно использовать как фон. Также можно для этих целей использовать все оттенки серого. Белый цвет помогает создать ощущение пространства, черный, наоборот, сокращает пространство и размеры.
4. Температура цвета
Если хотите создать нужное настроение при помощи дизайна, обратите внимание на температуру цвета — она может быть теплой или холодной.
К теплым цветам относятся: красный, оранжевый и желтый. Они ассоциируются с огнем, осенними листьями, солнцем, поэтому их можно использовать для создания атмосферы уюта, а еще, теплые цвета повышают аппетит.
Чтобы сделать аппетитную и уютную фотографию, необязательно изображать на ней только предметы теплых цветов. Чтобы сделать привлекательнее еду и напитки холодных оттенков, можно добавить фон, посуду или фильтр теплых оттенков.
На фотографии ниже для фона использованы бежевые оттенки: цвет кожи, дерева, сухой травы, все это добавляет атмосфере фото уюта и тепла. Та же чашка чая на белом фоне смотрелась бы не так атмосферно.
Холодные цвета: синий, фиолетовый, голубой помогут сделать дизайн спокойным и освежающим. Подойдут для рекламы летних коктейлей, которыми захочется охладить себя в жаркий день.
Еще холодные оттенки помогут создать атмосферу одиночества и тоски, этот прием часто применяют в фильмах.
Зеленый состоит из желтого и синего, то есть из смешанных теплого и холодного цветов. Поэтому он может быть и теплым, как хаки, и холодным, как мятный. Оттенки зеленого, в которых больше желтого цвета — теплые, те, в которых больше синего — холодные. На температуру зеленого влияют и другие цвета, которые добавлены к нему — красный, черный, белый, серый.
5. Тень, оттенок и тональность
Хроматические цвета можно менять — смешивать между собой и добавлять к ним черный, белый и серый. При этом можно поменять хроматический цвет настолько, что изменится настроение всего дизайна.
Тень
В зависимости от того, сколько черного добавлено к чистому цвету, он выглядит менее или более затемненным, поэтому этот параметр называется тень. Чем больше черного в цвете, тем он насыщеннее и глубже. Добавляя черный к хроматическим цветам можно добиться драматического эффекта, как это любит делать Лана Дель Рей в своих клипах.
Оттенок
Оттенком мы часто называем разные варианты цвета, на самом деле он зависит именно от того, сколько белого добавлено к основному цвету. Чем больше белого, тем менее интенсивный и более светлый получается цвет. Именно при помощи белого можно получить пастельные оттенки. Они пригодятся для создания нежного, воздушного дизайна и, чтобы гармонично сочетать несколько разных цветов в одном дизайне, чем большего белого в цветах, тем они менее контрастные.
Чем ближе точка к середине цветового круга RGB, тем в цвете больше белого, и тем светлее оттенок.
Тональность
Тональность зависит от того, сколько серого добавлено к цвету. Этот параметр регулирует интенсивность — чем больше серого, тем более приглушенный цвет. При помощи серого можно получить мягкие и спокойные оттенки. Интерьеры с использованием цветов с примесью серого выглядят более благородными и изысканными, а одежду приглушенной тональности легче сочетать между собой, чем яркую.
При помощи тональности и одинакового набора цветов можно создать разное настроение. Одежда бренда Benetton яркая, основная целевая аудитория компании — молодежь и те взрослые, которые хотят выделяться из толпы. В Uniqlo одежда тоже разноцветная, но почти все их вещи приглушенных оттенков. Аудитория любит сдержанный стиль или покупает в магазине базовые вещи, которые легко сочетать с другими. Благодаря тональности вещей Uniqlo там так легко подбирать комплекты, большинство вещей хорошо смотрятся вместе.
В диджитал-дизайне тональность называют насыщенностью (saturation).
Тональность цветов в природе зависит от погоды и освещения — в дождливый день или вечером, когда солнечного света меньше, цвета более приглушенные. Поэтому, чтобы создать меланхоличное настроение, достаточно добавить в основные цвета побольше серого.
6. Как подбирать цвета в дизайне
Есть два способа. Первый, изучить цветовой круг и научиться подбирать цвета по нашей статье. Второй — выбрать фотографию, которая нравится вам по оттенкам и подходит по настроению, загрузить ее в генератор палитры и получить список цветов, из которых она состоит. Готово! Теперь у вас есть подборка оттенков, которые можно использовать в своем дизайне. Ну и еще один секретный способ — выбрать одно из 100 готовых цветовых сочетаний.
Экспериментируйте с сочетаниями цветов, их тенями, оттенками и тональностью, пробуйте сделать несколько цветовых решений для одного и того же дизайна, чтобы выбрать лучшее. И помните, что восприятие цвета зависит не только от его насыщенности, температуры и контекста, но и от индивидуальных особенностей человека: географии, настроения, пола, возраста, характера.
