Комплементарные цвета: 21 пример контрастного дизайна

комплементарные цвета баннер

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

Что такое комплементарные цвета

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

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

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

output_Re4zcS

Источник: imdb.com

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

Какие комплементарные пары бывают

Есть два разных цветовых круга: RYB (круг Иттена) и RGB (цветовой круг для использования в диджитал-дизайне). Расположение цветов в этих кругах разное, а значит и комплементарные цвета в этих двух случаях будут отличаться.

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

Для того чтобы воспроизвести все цвета онлайн, на экранах компьютеров, смартфонов и телевизоров, понадобится другой набор цветов: красный, зеленый и синий. Цветовой круг для диджитал-дизайна называется RGB (аббревиатура от английского red, green, blue). На цветовом круге Canva можно самостоятельно найти комплементарные цвета. Подробнее о цветовом круге и других сочетаниях мы рассказали в статье о цветовом круге.

colors110619

Слева цветовой круг RYB, справа цветовой круг RGB Источник: learn.g2.com

Согласно кругу Иттена, или кругу RYB, есть три основные комплементарные пары:

  • Красный и зеленый,
  • желтый и фиолетовый,
  • синий и оранжевый.

Согласно цветовому кругу RYB основные комплементарные пары:

  • Бирюзовый и красный,
  • синий и желтый,
  • фиолетовый и зеленый.

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

Комплементарные пары по цветовому кругу Иттена (RYB)

Красный и Зеленый

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

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

output_Re4zcS

Pexels / Irina Iriser

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

adult-eyewear-fashion-1496647

Pexels / Hasib Khorami

Осторожно:

  • Сочетание красного с зеленым часто вызывает ассоциацию с Рождеством в европейской культуре, поэтому их следует использовать с осторожностью. Лучше поменять оттенок одного из этих цветов на более приглушенный.
  • Дальтоники не различают зеленый и красный, поэтому могут не увидеть изображение, построенное на контрасте этих двух цветов.
  • Красный цвет может раздражать, если его много. А вот если большую часть будет занимать зеленый, то небольшой процент красного хорошо привлечет внимание.

Желтый и Фиолетовый

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

output_Re4zcS

Pexels / Dids

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

nike-kobe-ad-nxt-360-yellow-strike-white-aq1087-700-5

Источник: solecollector.com

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

Осторожно:

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

Синий и Оранжевый

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

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

Эта цветовая пара популярна у режиссеров, ее часто использует в своих фильмах Уэс Андерсон. Например, во многих кадрах «Водной жизни» Билл Мюррей появляется в оранжевой шапке и голубой рубашке на фоне морских пейзажей. Еще больше удачных сочетаний цветов в фильмах – в этой статье

tumblr_niwljvAz0h1qzs1n8o1_1280

Источник: mediafactory.org.au

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

sand-dunes-691431_1920

Pixabay / Free-Photos

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

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

Комплементарные пары по цветовому кругу Canva (RGB)

Бирюзовый и красный

Контрастная пара, настроение которой меняется в зависимости от ее насыщенности. Этот контраст использован во многих кадрах фильма «Джокер». Бирюзовый фон подчеркивает красный грим и одежду главного героя, а темные насыщенные цвета делают атмосферу зловещей. Этот же прием использован и на рисованном постере Питера Мериска.

tumblr_pxo7v4U6fw1solxeko1_500

Источник: batmannotes.com

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

brooke-lark-ZkgWJ4BfgsE-unsplash

Unsplash / Brooke Lark

Синий и желтый

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

vincent-giersch-Jky9coxzeHI-unsplash

Unsplash/ Vincent Giersch

simpsony-the-simpsons-homer

Источник: goodfon.ru

Стоит чуть приглушить цвета и контрастное сочетание уже не будет таким позитивным. Это видно на примере картин Винсента Ван Гога, в его работах эти цвета обычно с примесями других оттенков. Цвета перестают быть строго противоположными, контраст остается, но становится мягче. Например, в картине «Букет ирисов» в синем есть вкрапления желтого, несколько лепестков ирисов яркого синего цвета, остальные приглушенные и голубые. Комплементарные цвета могут иметь примеси, как желтый фон с добавлением голубого в этом случае.

Фиолетовый и зеленый

aurora-borealis-1181004_960_720

Pixabay/ janeb13

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

output_Re4zcS

Pexels/ Marlene Leppänen

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

output_Re4zcS

Чтобы найти такую комбинацию:

  1. В первом окне введите HTML-код нужного цвета. Или выберите его курсором на цветовом круге.
  2. Во втором окне выберите из выпадающего списка цветовую комбинацию Complementary.
  3. Вы можете двигать любую точку на цветовом круге, если захотите поменять оттенок. Второй цвет тоже будет меняться, чтобы оставаться контрастным к выбранному цвету.

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

Подписывайтесь на обновления в Телеграме, Фейсбуке, ВКонтакте и Яндекс Дзене, чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!

Ваше секретное средство для потрясающих дизайнов