Крутая шпаргалка по сочетанию цветов / AdMe

Как устроен круг Иттена

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

Ещё в круге есть третичные цвета. Они получаются при смешивании первичного и вторичного цвета, которые соседствуют друг с другом на схеме. Например, жёлтый и зелёный дают третичный цвет — жёлто-зелёный, жёлтый и оранжевый дают жёлто-оранжевый и так далее. В результате во внешнем круге на схеме мы видим 12 цветов, из которых три первичных, три вторичных и шесть третичных.

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

Зеленый цвет

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

Как и когда появился круг Иттена

В истории было много попыток систематизировать цвета: есть цветовой круг Ньютона, Гёте и Оствальда. Но именно круг Иттена стал самым популярным. В бумажном виде эта схема продается теперь в любом художественном магазине.

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

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

Ключевые цветовые коды

Цветовой код – это устоявшееся цветовое сочетание, которое вызывает у человека определенные ассоциации. Коды могут вызывать положительные или отрицательные эмоции и относиться не только к моде. Например, желтый и красный могут ассоциироваться с Макдональдсом, черные и желтые – с предупреждающими вывесками или Билайном. Также к нежелательным цветовым кодам можно отнести пары черный + оранжевый (Хэллоуин), зеленый + красный (Новый год).

Немного литературы

Если вы хотите вникнуть поглубже и стать гуру в области колористики, то вот парочка полезных книг:

  • «Сочетание цветов на практике», Наоми Куно
  • «Искусство цвета», Иоханнес Иттен
  • «Диалектика мифа», Алексей Лосев (уровень «со звёздочкой» — для тех, кто хочет понимать всю глубину символизма цвета)

Цвет как инструмент управления вниманием и настроением

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

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

Фрагмент интерфейса Telegram

Фрагмент интерфейса Telegram

Зелёный. Означает успешный результат, завершение процесса. Побуждает к действию, поэтому им часто маркируются кнопки «Зарегистрироваться» и «Купить».

Основные комбинации на круге Иттена

Вариантов сочетаний цветов по кругу Иттена очень много. Давайте рассмотрим несколько из них, которые используются чаще всего.

1. Если провести через центр круга прямую линию, получится комплементарное сочетание — оно максимально контрастное.

Контрастные цвета, которые соединяет прямая линия
Контрастные цвета, которые соединяет прямая линия на круге, называются дополнительными

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

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

Контрастная триада получается при наложении равноб
Контрастная триада получается при наложении равнобедренного треугольника на круг

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

3. Равносторонний треугольник образует классическую триаду: три цвета в его углах будут давать сбалансированное сочетание. Этот вариант подойдёт, если вам нужно больше разнообразия в цветовой гамме.

Это сочетание смотрится более пёстрым, чем контрас
Это сочетание смотрится более пёстрым, чем контрастная триада

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

4. Ещё один вариант комбинации из трёх цветов — аналоговая триада. Здесь задействованы цвета, расположенные на круге рядом. Это сочетание без интенсивных контрастов.

Вот пример одного из таких сочетаний
Вот пример одного из таких сочетаний

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

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

Чем больше требуется цветов, тем труднее их с
Чем больше требуется цветов, тем труднее их сочетать, но круг Иттена упрощает задачу

По сути, здесь представлено сочетание из двух пар дополнительных цветов. Сочетание четырёх цветов в тетраде позволяет создавать красочное и разнообразное изображение.

6. Ещё одно сочетание двух пар комплементарных цветов — прямоугольная схема. В отличие от тетрады, здесь сочетаются более близкие оттенки.

Такая схема даёт много вариантов сочетаний
Такая схема даёт много вариантов сочетаний

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

Коричневый цвет

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

Теплый и холодный оттенки

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

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

Автоматические инструменты для выбора палитры

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

В теории Иттена есть много интересного и кроме цветового круга: как работать с цветовым воздействием и субъективными цветами, какие бывают контрасты и как, например, связаны форма и цвет. Читайте об этом .

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

Схема комплексного сочетания

Такая схема очень популярна. Кроме того, она является универсальной и подойдет под любую стилистику. В ее основе лежат белые, серые и бежевые оттенки. Дополнять их разрешается любыми яркими тонами и использовать в качестве небольших акцентов. Если впоследствии вы захотите обновить интерьер, вам достаточно будет сменить сочные тона на более спокойные. Интерьер сразу преобразится без больших финансовых вливаний. 

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

Нейтральные

Нейтральные: черный, бежевый, нюдовый, молочно-белый, терракотовый, коричневый, белый. Темные: черный, серый, бордовый, синий, хаки. Нейтральные цветовые семейства используются в униформах (военной, деловой), официальных костюмах, легких повседневных нарядах, модных total look. Могут использоваться для создания как классического традиционного, так и ультрамодного образа.

Градиентное сочетание цветов в интерьере

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

Зачем нужен круг Иттена

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

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

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

Яркие

Осенние: теплые тминный, бордовый, сине-зеленый, молочно-белый. Летние: фруктовые и яркие лимонный, лазурный, ярко-розовый, зеленый. Яркие цветовые семейства популярны для нарядов церемоний и торжеств, используются в женских деловых костюмах, модных нарядах и спортивной одежде. 

Культурный контекст

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

Танец дракона в Китае

Танец дракона в Китае

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

​Работа с оттенками. Влияние оттенков на силуэт

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

Монохромная схема

Монохромная схема, скорее всего, давно вам знакома. Для этого берутся три цвета, которые находятся рядом друг с другом. Они являются подвидами и различными вариациями друг друга. Всегда беспроигрышный вариант.

Схема триада

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

Ключевые цветовые семейства

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

Вместо заключения

Цвет в веб-дизайне — самый красноречивый инструмент, ведь на подсознательном уровне он считывается первым. Форма вторична. Поэтому подбирать палитру цветов для веб-дизайна стоит осознанно.

А в этом помогут:

  1. Понимание основ теории цвета.
  2. Учёт культурного контекста.
  3. Знание актуальных трендов.
  4. Сервисы для подбора сочетаний цветов в веб-дизайне.
  5. Наши бесплатные курсы: «Визуальный язык и его элементы» и «Figma. Начальный уровень»  

И помните: правила созданы, чтобы их нарушать! Но, чтобы правильно это делать, нужно их знать. И помнить о цели, с которой создаётся дизайн.

Adblock
detector