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

Контраст — это заметные цветовые различия.

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

Контраст светлого и тёмного. Пожалуй, самое главное золотое правило: темное на светлом, светлое на темном. Этот прием лучше всего видно на ч/б фотографии, поскольку, несмотря на отсутствие любых цветов, за счет контраста, мы понимаем фактуру, объем, пространство и тд. И, если на любую цветную картинку наложить ч/б фильтр, то мы можем увидеть какие цвета темные, а какие светлые (2).

Поэтому этот контраст не совсем про белый на черном, черный на белом, а и про хроматические цвета (3). Зеленый на фиолетовом — это про светлый на темном; темно-синий на желтом — темное на светлом. 

В этом контрасте нужно помнить про тональность. 

Контраст по насыщенности. Это про сочетание бледных (пастельных) и ярких оттенков. Он может быть как оттенок одного тона, так и нескольких. Этот прием отлично работает в качестве акцента: акцент в тексте, акцент на фото, акцент на графике и т.д.

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

Совет 1. Если у тебя цветная картинка и она кажется слишком насыщенной, слишком тяжелой, то добавь в нее белого или черного цвета, и картинка станет “легче”. Ахроматические цвета помогут смягчают всю картину и визуал будет выглядеть не таким «вырвиглазным».

Совет 2. На какой картинке бургер выглядит более сочно?

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

Как и на следующей картинке фоны хорошо контрастируют с бургером, поэтому бургеры хорошо выделяются (контраст по насыщенности).

Если тебе нужно выделить объект, выбирай нейтральный к нему фон, соблюдай контраст по насыщенности и контраст светлого и темного.

Нюанс —  едва заметные различия в цвете, фактуре, тональности. 

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

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

1. Adobe Сolor
Идеальный инструмент для подбора цветовых гармоний. Можно регулировать тональность, яркость, выбирать основной цвет и так далее. 

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

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

3. Готовые палитры colorhunt и coolors
Пользуйся, но учти, что каждую палитру нужно пробовать на своем контенте(Вспоминаем про контраст по объему пятен).

Поиграем?

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

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