3 октября 2022 г. Дизайн
pic Руслан Брантов
Меня зовут Руслан Брантов. Я работаю в типографии уже на протяжении 10 лет в качестве графического дизайнера и печатника.

Теория цвета


В этой статье мы много узнаем о цвете, правилах сочетания цветов и многое другое!


Содержание:
Что такое цвет?
Три параметра цвета
Синтез цвета
Сочетание цветов

 

Что такое цвет?

Для того чтобы понять, что такое цвет мы начнем издалека… с изучения атома! Как вы, наверное, помните атом состоит из ядра в центре (которое в свою очередь состоит из протонов и нейтронов) и вращающихся вокруг ядра электронов.

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

Как и любая волна, электромагнитная волна имеет колебания, т.е. у электромагнитной волны есть частота, где 1 Герц равен одному колебанию в секунду.

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

Фотон ведет себя не только как частица, но как и волна! Да это трудно представить, но просто примите как факт. Т.е. у испускаемых фотонов есть частота, и от этой частоты зависит как мы воспринимаем испускаемый свет.

Получается из всего испускаемого света, мы видим только маленький диапазон частот от 780 нм до 380 нм, который мы и воспринимаем как видимый свет.

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

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

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

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

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

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

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

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

 

Три параметра цвета

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

А что если длина волны будет 780нм т.е. красный, и экран монитора начинает увеличивать длину волны. Получается должен состояться переход между красным к инфракрасному свету, который мы уже не видим. И самое интересное, как должен состояться переход? Какой должен быть промежуточный цвет? По логике красный цвет должен становится, при увеличении волны, все более прозрачным, пока не состоится окончательный переход в инфракрасный свет. Тоже самое с фиолетовым цветом - при дальнейшем уменьшении волны, фиолетовый цвет, по логике, должен становится более прозрачным, пока не перейдет в ультрафиолетовый свет. Но этого на самом деле не происходит. Цвета не становятся полупрозрачными при увеличении или уменьшении длин этих волн.

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

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

Получается все цвета, что мы видим, будто замыкаются в круг, как показано на рисунке ниже:

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

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

Тон - это просто название цвета на этом цветовом круге. Можно сказать фиолетовый цвет или фиолетовый тон - это по сути одно и тоже.

Итак, с первым параметром мы разобрались, осталось еще два: светлота и насыщенность.

Светлота - это стремление цвета, например красного, при увеличении светлоты к белому цвету, а при уменьшении светлоты к черному.

И последний параметр это насыщенность. Но перед тем как дать определение насыщенности, нам нужно усвоить еще одно понятие - это чистота цвета.

Когда вы смотрите на цветовой круг, то вы видите чистые цвета. А почему их называют чистыми? Я дам научное определение - если предмет отражает только световой луч красного цвета (780нм), а остальные волны поглощает, то такой цвет мы видим как ярко, прям ядовито красный, и такой цвет является чистым. Но если предмет помимо красных фотонов, отражает, например, еще и другие световые лучи, но в гораздо меньшем количестве, то мы уже не увидим чистый красный цвет, а быть может, это уже будет светло-красный или темно-красный.

Чистый цвет является максимально насыщенным.

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

Синтез цвета

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

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

С помощью смешивания этих трех цветов разной интенсивности (например, в пикселях - это уровень яркости лампочек красного, зеленого и синего, которое варьируется от 0 до 255. Где 0 означает, что лампочка не горит, а 255 означает что лампочка горит с максимальной яркостью) мы можем получить абсолютно любой цвет. Т.е. можем сказать, что эти 3 цвета являются главными и они также основывают цветовую модель, которая называется RGB (Red, Green, Blue т.е. красный, зеленый и синий).

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

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

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

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

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

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

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

А какой цвет краски может отразить сразу два световых луча из 3? Посмотрите снова на наш упрощенный цветовой круг.

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

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

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

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

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

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

Поэтому в принтерах, помимо красок голубого, желтого и пурпурного цветов, есть отдельно еще и черный цвет, что позволяет экономить краски трех вышеперечисленных цветов. Такая цветовая модель называется CMYK (Cyan, Magenta, Yellow, Key Color, т.е. голубой, пурпурный, желтый и ключевой цвет, что означает черный).

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

 

Сочетания цветов

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

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

Т.е. теперь чем ближе цвет к центру круга тем сильнее он стремиться к белому цвету, и в самом центре он его достигает. А чем ближе цвет к краю круга тем сильнее он стремится к черному.

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

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

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

И первая схема - это монохроматическая.

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

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

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

Следующая цветовая схема - это аналогичные цвета.

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

Давайте посмотрим на примеры:

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

В этой картинке используются красный, пурпурный и фиолетовый цвета.

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

Переходим к следующему сочетанию цветов - это триадные сочетания цветов.

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

Такие цвета очень подходят для мультиков, так как такое сочетание цветов является очень ярким.

Здесь используются такие равноудаленные цвета как оранжевый, зеленый и сине-фиолетовый.

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

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

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

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

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

Идем дальше. Дальше у нас сплит-комплементарная схема.

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

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

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

И последняя схема - это тетрадная или двойная комплементарная схема.

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

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

Необязательно использовать одну пару для заднего плана и одну для переднего, как, например, на этой картинке. Здесь на передней плане используется 2 цвета с одной пары (красно-оранжевый и голубой) и 1 цвет с другой пары (желтый). А на заднем фоне используется сине-фиолетовый, который является частью второй пары.

Вот и все по теории цвета:)

В заключении хочу порекомендовать вам сайт color.adobe.com где очень удобно подбирать сочетания цветов и постоянно там появляются новые цветовые схемы, так как на этих 6 схемах сочетания цветов не ограничиваются, мы лишь изучили самые популярные.