Сочетания цвета. Цветовые гармонии

Время прочтения: 6 минут

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

Иоганнес Иттен — автор книги «Искусство цвета», в которой он описывает основные законы цвета, его природу, закономерности цветовых контрастов, цветовых гармоний и т.д. Эта книга — основа. Если хочешь углубиться, обязательно прочти).

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

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

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

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

Цвета второго порядка. Фиолетовый, зеленый и оранжевый. Они образуются путем смешивания цветов первого порядка. То есть желтый + красный = оранжевый.

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

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

Сочетание цветов в пределах одного цветового тона. Берем любой понравившийся цвет и подбираем его оттенки.


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

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

Также стоит учесть (забежим наперед с урока типографики), что контрастное комплементарное сочетание цветов не подходит для большого количества текста. Сравни (4 фото). Поскольку сочетание цветов сильно контрастное, а линии буков уж сильно тоненькие, то текст скорее будет рябить в глазах, чем выполнять свою функцию привлечения внимания. Для заголовков (с широкими линиями по массе), цветовых акцентов этот прием отличный, но не для тонких букв.
3. Треугольная гармония. 3 цвета

Это гармония, которая строится на точках треугольника (равнобедренного или равностороннего) на цветовом круге. В сочетании 2-х и более цветов желательно использовать один цвет, как основной, а остальные — как дополнительные.

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

Треугольная гармония выглядят достаточно интересно, и при этом спокойно и приглушенно.
4. Квадратная гармония. 4 цвета

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

И не смотря на буйство красок и кучи цветов, визуал не выглядит наляписто и через край, он гармоничный и контрастный.
5. Последовательная (аналогичная) гармония. 4+ рядом стоящие цвета

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

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

  • выучи основные характеристики цвета;
  • распечатай себе цветовой круг;
  • используй цветовые гармонии.
Начать тест
Какой комплементарный цвет к зеленому?
Все верно. И к светло и темно зеленому комплементарным цветов будет красный. Даже скорее красный, ближе к розовому.
Комплементарный цвет к желтому — фиолетовый. Посмотри внимательней на цветовой круг в Adobe Colors.
Синий будет комплементарным желто-оранжевый. Посмотри внимательней на цветовой круг в Adobe Colors.
Увы, комплементарный цвет к желтому — фиолетовый. Посмотри внимательней на цветовой круг в Adobe Colors.
Дальше
Проверить
Готово
Какая цветовая гармония на вижуалах?
Не совсем :)
1 — Если бы там был синий, фиолетовый — то бинго! Но увы, это последовательная гармония, поскольку желтый находиться рядом с оранжевым.
2 — Верно!
Мимо :) Подумай еще. Монохром — это про 1 цвет, у нас в обоих случаях их 2. А для комплементарной гармонии не хватает контрастности.
Не совсем :)
1 — Это не монохромная, а последовательная гармония, поскольку желтый находиться рядом с оранжевым.
2 — Верно!
Все верно! Оба варианта относятся к последовательной гармонии, поскольку желтый находиться рядом с оранжевым; а оранжевый рядом с зеленым.
Дальше
Проверить
Готово
Что общего в этих постерах?
Дальше
Проверить
Готово
Какие цвета используются в постере?
Дальше
Проверить
Готово
Какая цветовая гамма больше подходит к эко-косметике?
Неплохо! Круто, что мы пошли дальше типичного зеленого для эко-сферы :) Но мы бы все таки выбрали вариант Г, потому что каждая из этих цветовых гамм имеет место быть (даже вторая). А с 3 вариантов было бы классно выделиться среди конкурентов. 
Скууучно :) Но имеет место быть.
Мы бы все таки выбрали вариант Г, потому что каждая из этих цветовых гамм имеет место быть. И я надеюсь ты помнишь про ассоциации первого порядка из первой статьи, потому что этот вариант — прямое попадание.
Отлично и смело!
Но давай все таки выберем вариант Г, потому что каждая из этих цветовых гамм имеет место быть. Даже самая заурядная гамма для своей ЦА и своего контекста будет отличным решением :) 
Мы очень рады, что ты выбрал этот вариант (и вспомнил про ассоциации первого порядка). Зеленый — самый популярный :)
Напиши в общем чате, пожалуйста почему выбрал именно этот вариант)
Дальше
Проверить
Готово
Как с точки зрения теории можно объяснить что цвет текста «kukuruza kukuruza» на фоне здесь не ок?
Дальше
Проверить
Готово
ВЫБРАТЬ ТАРИФ
ВЫБРАТЬ ТАРИФ