Цветовая теория: связь насыщенности и цветового тона с яркостью

Известный художник Марко Буччи рассказывает о нюансе при работе с цветом.

image6.png

У себя на YouTube-канале художник-иллюстратор Марко Буччи рассказал об особенности цвета и о том, как насыщенность, цветовой тон и яркость влияют друг на друга.


Статья — пересказ этого видео.

Основы

Для начала разберемся в базовых терминах.

image18.png

В правой области палитры вы выбираете цветовой тон — hue. Это просто название цвета: красный, зеленый, синий и т.д. Перемещаясь по палитре горизонтально, вы выбираете насыщенность цвета — saturation. Перемещаясь по палитре вертикально, вы выбираете яркость — value (еще этот параметр переводят как «светлоту», «светотеневой тон» или просто «тон» — мы для удобства здесь остановимся на «яркости»). Параметр яркости показывает, насколько цвет светлый или темный.

Цвет напрямую зависит от яркости. Вот, например, два цвета с разной насыщенностью:

image12.png

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

image26.png

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

image8.png

image11.png

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

Более того, каждое ваше цветовое решение влияет на яркость.

Насыщенность

Для начала рассмотрим пример с насыщенностью.

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

image28.png

Сделаем еще несколько образцов, делая их все более насыщенными.

image9.png

А теперь переведем изображение в черно-белое.

image15.png

Яркость выходит разная — добавление насыщенности делает цвет темнее. При этом Photoshop показывает, что уровень яркости не изменился.

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

image33.png

На изображении выше палитра цветов Corel Painter. Ее форма сама по себе говорит нам, что более насыщенный цвет будет ниже по яркости. Помните, как яркость Photoshop не отражала изменения в насыщенности? Если изменять насыщенность в палитре Corel Painter, ползунок значения яркости теперь сдвигается. Но и это не полностью передает действительность.

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

image20.png

При изменении насыщенности ползунок яркости не двигается, оставаясь на отметке 100.

Цветовой тон

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

Сверху у нас остается наш предыдущий пример с красным цветом. Теперь повторим процесс с синим.

image24.png

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

image29.png

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

Вернемся к палитре Corel Painter. Мы уже знаем, что она показывает нам снижение яркости при увеличении насыщенности.

image2.png

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

Вот еще один особенно выразительный пример: нарисуем образец фиолетовым цветом с 50% яркостью:

image27.png

Теперь выберем максимальную яркость и максимальную насыщенность, нарисуем еще один образец:

image31.png

Переводим в ч/б:

image30.png

Это сложно уложить в голове, но мы сместились вверх на половину палитры и получили более темный цвет.

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

image1.png

При увеличении насыщенности он не становится очень темным. У нас есть два образца, как и с фиолетовым цветом. Переходим в ч/б, и результат выходит более ожидаемым:

image22.png

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

image4.png

При переводе изображения в ч/б мы видим такое же поведение.

image23.png

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

Первый слой — это просто схема со всеми оттенками и различными уровнями насыщенности:

image6.png

На втором слое те же уровни насыщенности, но в ч/б формате.

image21.png

Разумеется, тут не отображено каждое мельчайшее изменение оттенка, но отражены наиболее существенные.

Скачать схему в PSD формате можно тут.

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

Существует еще одна проблема при рисовании в цифровом формате.

Допустим, мы хотим проверить читаемость рисунка, для чего нужно перевести его в ч/б. Неправильным способом будет использование настройки Hue/Saturation (Цветовой тон/Насыщенность). Когда мы снижаем насыщенность, яркость для всех цветов остается одинаковой, что не соответствует действительности.

image17.png

Для примера мы используем Photoshop, но все то же самое происходит в Krita, в Corel Painter и в Clip Studio Paint. Один из надежных способов проверить рисунок в ч/б — переключить режим изображения на Greyscale (Градации серого).

image5.png

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

Более хитрый способ заключается в создании нового слоя и заливки его белым цветом. После режим слоя переводится в Color (Цветность):

image10.png

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

Лучший способ проверки доступен только в Photoshop. Перейдите по вкладкам View (Просмотр) -> Proof Setup (Варианты цветопробы) -> Custom (Заказной).

image25.png

Нажмите на выпадающий список и выберите Dot Gain 20%.

image13.png

Теперь вы можете переключаться между цветным и ч/б режимами с помощью сочетания клавиш Ctrl+Y.

Применение цветовой теории в рисунке

Теперь на примере работы Буччи рассмотрим, как эта теория цвета на самом деле влияет на рисование. Вот небольшой набросок руки Марко:

image16.png

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

image14.png

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

image32.png

Вот еще один пример, где наоборот нужны были насыщенные цвета, которые не читались бы как темные:

image19.png

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

image3.png

Эту теорию цвета полезно всегда держать в голове при рисовании.

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

image7.png

Существует англоязычный акроним ROY G BIV (Рой Джи Бив). Это измерения длины волны каждого цвета в порядке убывания. Длина волн крайне относительно совпадает со схемой значений яркости. Например, красный цвет не будет самым светлым при высокой насыщенности. Поэтому точного ответа дать сейчас нельзя.

Кто автор урока?

Марко Буччи — это известный художник-иллюстратор и преподаватель живописи из Канады. За 15 лет профессиональной деятельности Марко успел поработать с издательством Walt Disney Publishing Worldwide, производителями игрушек LEGO, Hasbro, Mattel Toys и Fisher-Price, разработчиком игр LucasArts, а также мультипликационными студиями Nelvana, GURU Studio, C.O.R.E. Digital Pictures и Yowza! Animation.

В качестве преподавателя Марко сотрудничал с Академией искусств Сан-Франциско, Колледжем Сентенниал в Торонто и другими учебными заведениями.

Дополнительные материалы

Помещаем объект в окружение. Изучаем свет и цвет
Все о теплохолодности, или какого цвета будут тени, свет и рефлексы
Температура цвета меняет перспективу. Правда ли это?
Цвет. Температура и восприятие
Работа с цветом. Опыт Марко Буччи, иллюстратора, сотрудничавшего с Walt Disney
Как с помощью цвета сделать однотонную поверхность интересной

708 0 850 6
4
2022-01-13
Спасибо за весьма наглядную и познавательную статью! Такие материалы очень полезны – они создают единое информационное поле, договариваясь о терминах, мы лучше понимаем друг друга, а осознавая принципы и механизмы чего-либо повышаем свой профессионализм. Однако, в конце статьи есть утверждение о несовпадении самых ярких и насыщенных оттенков, с которым можно поспорить: «Возможно, данный эффект связан с длиной световых волн. В любом случае, за объяснениями лучше будет обратиться к науке. Существует англоязычный акроним ROY G BIV (Рой Джи Бив). Это измерения длины волны каждого цвета в порядке убывания. Длина волн крайне относительно совпадает со схемой значений яркости. Например, красный цвет не будет самым светлым при высокой насыщенности. Поэтому точного ответа дать сейчас нельзя.» Возможно, автор статьи не знаком с механизмом, влияющим на восприятие насыщенности цвета и его светлоты, но этот эффект вполне объясним с точки зрения науки.
Цветовая чувствительность человеческого глаза располагается в диапазоне от красных до фиолетовых волн. Причем, наибольшая чувствительность заметна в области зеленых волн света. Но зеленый мы, тем не менее, не воспринимаем наиболее светлым. Это вполне естественно, если вспомнить, что за цветовое зрение в глазу человека отвечают три вида рецепторов, реагирующие на красные, зеленые и синие длины волн. Красные и синие находятся на периферии, следовательно, их насыщенность не позволяет ощущать их наиболее яркими (светлыми). Промежуточные голубые, желтые и пурпурные (если пользоваться моделями rgb и cmy) получаются смешением реакций от двух видов рецепторов сразу, что дает ощущение более яркого сигнала. Поэтому желтые, пурпурные и голубые мы воспринимаем светлее, чем остальные. Этот эффект, кстати, очень хорошо виден на иллюстрациях, где представлена полоска растяжка цветов: наиболее широкая в области зеленых, более темные красные и синие и сравнительно узкие всплески светлых пурпурных, голубых и желтых.
З.Ы. Отдельный пост, наверное, был бы нагляднее - с иллюстрациями и графиками, да тема мелкая для отдельного поста. Так что извините за "многобукв".
2022-01-18
Здравствуйте! Спасибо за статью. Я не художник. Но рисовать приходится периодически. В таблице-палитре цветов в ряду с желтым цветом, первые шесть образцов практически дублируют верхний над этим оранжевый ряд. Это у меня с распознаванием цвета не так что то? ) или в этом есть какой то смысл? Если кто разбирается подскажите пожалуйста почему так?
2022-01-19
UrkusЗдравствуйте! Спасибо за статью. Я не художник. Но рисовать приходится периодически. В таблице-палитре цветов в ряду с желтым цветом, первые шесть образцов практически дублируют верхний над этим оранжевый ряд. Это у меня с распознаванием цвета не так что то? ) или в этом есть какой то смысл? Если кто разбирается подскажите пожалуйста почему так?

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

Кстати, насчет распознавания цвета: если бы это было у Вас или проблема корретного тображения монитором, то в том же ФШ при пробе цвета пипеткой на этих квадратиках были бы разные значения. А они, действительно, одинаковы.
2022-01-19
Юрий Жеребцов (Tar_Pen_taer)
Здравствуйте! Да всё у Вас нормально. Это некорректная иллюстрация. Кстати, если в том же фотошопе понижать насыщенность самого правого пятна, то светлота не будет так усиливаться. Такая потеря насыщенности, как на иллюстрации, соответствует разбелу краски. Можно добавить, что это часто происходит: смешиваются сразу несколько представлений и моделей из теории о цвете физиков и художников, появляется путаница.

Кстати, насчет распознавания цвета: если бы это было у Вас или проблема корретного тображения монитором, то в том же ФШ при пробе цвета пипеткой на этих квадратиках были бы разные значения. А они, действительно, одинаковы.

Спасибо!
RENDER.RU