Цветовое пространство hsb: Что такое цветовые модели RGB, CMYK, HSB, Lab и какими они бывают / Skillbox Media

Цветовые стандарты в полиграфии — СЕВЛАМИ

Цветовая модель

CMY(K), RGB, Lab, HSB — это цветовая модель. Цветовая модель — термин, обозначающий абстрактную модель описания представления цветов в виде чисел в системе координат цветовых компонентов. Каждая модель с помощью данных множество цветов цветовой модели определяет цветовое пространство.

Аддитивное смешение цветов — метод синтеза цвета, основанный на сложении цветов непосредственно излучающих объектов. Метод аддитивного смешения основан на особенностях строения зрительного анализатора человека, на таком явлении как метамерия. Сетчатка человеческого глаза содержит три типа колбочек, воспринимающих свет в фиолетово-синей, зелено-жёлтой и жёлто-красной частях спектра. Стандартом для аддитивного смешения цветов является модель цветового пространства RGB. Смешивая в определённом соотношении три основных цвета — красный (red), зелёный (green) и синий (blue), можно воспроизвести большинство воспринимаемых человеком цветов.  Аддитивное смешение используется в компьютерных мониторах или телевизионных экранах, цветное изображение на которых получается из красных, зеленых и синих точек. 

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

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

RGB

RGB — аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий. Аддитивная (Add, англ. — добавлять) цветовая модель, как правило, служащая для вывода изображения на экраны мониторов и другие электронные устройства. Как видно из названия – состоит из синего, красного и зеленого цветов, которые образуют все промежуточные. Обладает большим цветовым охватом.

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

 

CMY(K)

CMYK — Cyan, Magenta, Yellow, Key color — субтрактивная (subtract, англ. — вычитать) схема формирования цвета, используемая в полиграфии для стандартной триадной печати. Обладает меньшим, в сравнении с RGB, цветовым охватом.

CMYK называют субстрактивной моделью потому, что бумага и прочие печатные материалы являются поверхностями, отражающими свет. Удобнее считать, какое количество света отразилось от той или иной поверхности, нежели сколько поглотилось. Таким образом, если вычесть из белого три первичных цвета — RGB, мы получим тройку дополнительных цветов CMY. «Субтрактивный» означает «вычитаемый» — из белого вычитаются первичные цвета.

Key Color (черный) используется в этой цветовой модели в качестве замены смешению в равных пропорциях красок триады CMY. Дело в том, что только в идеальном варианте при смешении красок триады (C)100%+(M)100%+(Y)100% получается чистый черный цвет. Но на практике он получится серо-коричневым — в результате внешних условий, условий впитываемости краски в материал, и неидеальности красителей. К тому же, возрастает риск неприводки печатных элементов, напечатанных черным цветом, а также переувлажнения материала (бумаги) в офсетном способе печати.

LAB

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

Светлота задана координатой L (изменяется от 0% до 100%, то есть от самого темного до самого светлого), хроматическая составляющая — двумя декартовыми координатами a и b. Первая обозначает положение цвета в диапазоне от зеленого до пурпурного, вторая — от синего до желтого.

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

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

HSB

HSB — модель, которая является аналогом RGB, она основана на её цветах, но отличается системой координат. Любой цвет в этой модели характеризуется тоном (Hue), насыщенностью (Saturation) и яркостью (Brightness).

Тон — это собственно цвет. Насыщенность — процент добавленной к цвету белой краски. Яркость — процент добавленной чёрной краски.

HSB — трёхканальная цветовая модель. Любой цвет в HSB получается добавлением к основному спектру чёрной или белой краски. Модель HSB не является строгой математической моделью. Описание цветов в ней не соответствует цветам, воспринимаемых глазом. Дело в том, что глаз воспринимает цвета, как имеющие различную яркость. Например, спектральный зелёный имеет большую яркость, чем спектральный синий. В HSB все цвета основного спектра (канала тона) считаются обладающими 100%-й яркостью. На самом деле это не соответствует действительности.

Хотя модель HSB декларирована как аппаратно-независимая, на самом деле в её основе лежит RGB. В любом случае HSB конвертируется в RGB для отображения на мониторе и в CMYK для печати, а любая конвертация не обходится без потерь.

Стандартный набор красок

В стандартном случае полиграфическая печать осуществляется голубой (cyan), пурпурной (magenta), желтой (yellow) и черной (Key color, Kontur, BlacK) красками, что составляет палитру CMYK. По некоторым данным «К» – это первая буква слова «Key», что в переводе с английского означает «ключевой», «скелетный». Другие авторы ассоциируют «К» с немецким «Kontur» — контур. Расшифровки буквы «К» в цветовой схеме CMYK нет. Чёрный цвет не стали обозначать буквой «В» (black), чтобы не путать с английским blue – голубой. Поэтому для обозначения чёрного цвета взяли последнюю букву слова «black». 

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

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

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

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

Печать дополнительными красками

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

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

В чем разница CMYK или Pantone?

Как мы знаем CMYK состоит из четырех печатных форм и соответственно, четырех печатных секций с настройками, что в конечном итоге дает разный тон и цвет в тираже в начале, середине и конце. Так как переменное давление, подачи краски, не однородность материала, состояние формы в процессе печати меняются. Если мы печатаем краской с одной формы 100% «плашку», то разнотон минимален!

Подготовка макетов для полиграфии

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

Если с вами не оговорена возможность печати дополнительными (SPOT) красками, готовьте макет в цветовом пространстве CMYK, какими бы привлекательными вам не казались цвета в палитрах Pantone. Дело в том, что для имитации цвета Pantone на экране используются цвета, выходящие за пределы цветового пространства CMYK. Соответственно, все ваши SPOT-краски будут автоматически переведены в CMYK и результат будет совсем не таким, как вы ожидаете. Если в вашем макете (при договоренности об использовании триады) все-таки есть не CMYK краски, то важно уточнить возможности типографии печатать дополнительные цвета на печатном оборудовании и ценовой уровень возможностей изделия.

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

Принятое CMYK читается как «СМИК» или принятые термины в типографиях «триадные краски» и «полноцвет».

В цветной печати для получения всевозможных цветов и оттенков при помощи CMYK используются цифровые обозначения. Так, например, для получения морковного цвета требуется смешать следующие краски: 4 % голубой (C), 50 % пурпурной (M), 100 % жёлтой (Y) и 0 % чёрной (K). В цифровом выражении морковный цвет выглядит следующим образом: C4-M50-Y100-K0.

Формулы образования некоторых распространённых цветов по цветовой схеме CMYK

Название цвета	C	M	Y	K
Баклажановый	0	100	33	40
Бронзовый	12	58	88	6
Бургундский	0	97	100	50
Васильковый	58	37	0	7
Горчичный	1	12	77	0
Золотой	0	20	60	20
Индиго	50	100	0	62
Каштановый	0	55	55	20
Коралловый	0	50	69	0
Кукурузный	4	1	77	0
Лайм	20	0	100	0
Лиловый	0	49	33	14
Лимонный	0	8	94	1
Морковный	4	50	100	0
Нефритовый	100	0	36	34
Оливковый	0	0	100	50
Оранжевый	0	35	100	0
Серый	0	0	0	50
Тёмно-мандариновый	0	39	99	0
Фуксия	7	95	0	0
Хаки	55	35	62	10
Чертополох	18	27	2	1
Яблочно зелёный	23	0	100	29

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

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

Виды растрирования в цветной печати

Классическое растрирования – Количество точек на см, не меняется – Размер точек, меняется

Гибридное растрирование – Количество точек на см, меняется – Размер точен, не меняется

Стохастическое растрирование — Количество точек на см, меняется – Размер точен, не меняется

Растрирование используется для получения полутонов и всевозможных цветовых оттенков схемы CMYK.

Что такое цветовое пространство и в чем разница между CMYK и RGB

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

Что такое цветовое пространство

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

Начнем с того, что у людей с обычным цветовосприятием в глазной сетчатке есть три рецептора, чувствительных к свету различных волн – S (short), M (medium) и L (long). Получается, что S-рецепторы воспринимают синие оттенки, М – зеленые, а L – красные.

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

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Основные системы цветовых пространств

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

RGB

Это адаптивное цветовое пространство, которое описывает способ кодирования цветов за счет комбинации трех основных цветов – красного (Red), зеленого (Green) и синего (Blue). Как уже стало ясно, их выбор основан на характере цветовосприятия человеческим глазом. Кстати, у этой модели есть несколько вариаций, в том числе Adobe RGB и sRGB – последний считается стандартом для графики в интернет-пространстве.

Конкретный оттенок в этой модели задается посредством трех координат. Они отражают яркость одного из базовых цветов, и значение это может составлять от 0 до 255, то бишь занимает 256 бит или 32 байта.

Чтобы удобнее было записывать эти значения, были придуманы HEX-коды. В них интенсивность оттенка отражается через двухзначное число в шестнадцатеричной системе – от 0 до F. Подобная запись дает преимущества при копировании и стандартизации. Кстати, иногда в этой модели HEX-код содержит только три символа. Это происходит потому, что каждый второй символ совпадает с первым. То есть #FFBBCC выглядит как #FBC, а #446699 – так #469. Ниже на картинке приведен пример.

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

Цвета при печати переводятся в формат CMYK, о котором далее и поговорим.

CMYK

CMYK – это субтрактивная модель, в которой новые оттенки создаются за счет перемешивания четырех базовых – бирюзового (Cian), пурпурного (Magenta), желтого (Yellow) и черного (Key color black). В этом случае для каждого из них регулируется интенсивность в процентном соотношении от 0 до 100.

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

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

Причем тут Pantone

Это компания, основанная в Нью-Йорке в 50-е годы 20 века и специализирующаяся на производстве пигментов и продаже чернил. Также организация знаменита тем, что разработала собственную систему стандартизации оттенков, в которой каждому присваивается определенный код, и называется она Pantone Matching System (PMS). Это никак не цветовое пространство, а лишь способ подбора цветов.

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

HSB и HSL

RGB, как мы поняли, подходит для работы на мониторе, однако эта модель будет неудобной в случае, если дизайнеру понадобится изменить один из параметров, например яркость, тон или насыщенность. Чтобы было понятнее, приведу пример – у нас есть ярко-красный цвет #FF1616, при этом для макета необходим в два раза более темный оттенок, а также другой тон, скажем, желтый, со схожими параметрами яркости и насыщенности. В первом случае выйдет #800B0B, а во втором – #FFF116. Как так получилось? А с помощью цветового пространства HSB.

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

Соответственно, HSB – это пространство, в котором базовыми координатами цвета являются такие параметры, как цветовой тон (Hue), насыщенность (Saturation) и яркость (Brightness). Кстати, это пространство еще называют HSV – суть та же, просто меняется буква (V – Value, значение).

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

Еще есть несколько похожее на HSB пространство – это HSL. Здесь уже меняется последний параметр – вместо яркости (Brightness) используется уже светлота (Lightness). И их схожесть не означает то, что обе модели идентичны.

В HSL со светлотой выходит обратная картина – если задать ей значение 0%, то выйдет черный, а если 100% – светлый. В то время как в HSB 100% яркости дают более яркий цвет, а белый получается только при нулевой насыщенности.

То есть светлота отвечает за освещенность примеси белого и черного. Если проводить конвертацию цвета из HSL-системы в HSB, светлота L повлияет сразу и на яркость S, и на насыщенность B, при всем этом сохранится только тон H.

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

LAB и LCh

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

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

Регулировка координат осуществляется через светлоту (Lightness), тон и насыщенность. Здесь A представляет собой положение точки на цветовом спектре от зеленого до красного, а B – та же точка, но уже в диапазоне от синего до желтого. Значение L может варьироваться от 0 до 100, а для A и B – от -128 до 128. Это значит, что эти параметры указывают не просто на интенсивность определенного оттенка, но и на его расположение в спектре.

Звучит сложно, но можно представить это как смешение четырех основных цветов двух спектров – красного, зеленого, желтого и синего. Кстати, это самые простые примеры: вот у красного будут координаты LAB (100, 128, 128), у зеленого – LAB (100, −128, 128), а с белым еще проще – здесь это LAB (100, 0, 0).

Если в RGB настраивать цветовые тона удобнее через пространство HSB, то для LAB существует свой аналог, цилиндрическая версия модели – LCh. Тут применяются полярные координаты вместо прямоугольных, причем за C (Chroma) берется насыщенность, она же хроматическая составляющая, отвечающая за длину радиуса и удаленность от центра цветового круга. А h (Hue) представляет собой угол поворота в градусах, показывая таким образом цветовой тон.

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

На этом у меня все! Надеюсь, вы разобрались с видами цветовых пространств и теперь понимаете разницу между ними.

3.2 Цветовой режим RGB и HSB

Обзор

В этом учебном задании учащиеся добавляют цвет к рисунку, сделанному в упражнении 1.

серого до сих пор), чтобы определить цвета и добавить прозрачность. Применяются как цветовые модели RGB (красный, зеленый, синий), так и HSB (оттенок, насыщенность, яркость).

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

Рекомендуемая продолжительность

45 минут

Цели

Учащиеся смогут:

• объяснять и использовать цветовой режим HSB.
• понять разницу между цветовыми режимами RGB и HSB.

Результаты учащихся

Абстракция:

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

Алгоритмы:

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

Программирование:

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

Словарь

Оттенок	Оттенок цвета
Насыщенность	Интенсивность или яркость цвета (иногда называемая цветностью)
Яркость	Количество белого или черного в цвете.

Ресурсы

• Видеоруководство: 1.2 Цвет | Код
• Обработка обучения: Глава 1. Пиксели, Раздел 3. Цвет Rgb
• Начало работы с p5.js: Глава 3. Рисование (Раздел: Цвет)

Цвет HSB

HSB — это цветовое пространство, альтернативное RGB. В этой модели цвета описываются их оттенком, насыщенностью и яркостью:

• Оттенок выражается в градусах, от красного (0), через все цвета вокруг цветового круга и обратно к красному (360).
• Насыщенность — это количество цвета в диапазоне от 0 до 100.
• Яркость количество света в диапазоне от 0 до 100. Альфа-канал меняется от 0 (невидимый) до 1 (полностью непрозрачный).

Чтобы p5 использовал HSB вместо RGB, мы вызываем colorMode(HSB) . Вот тот же пример выше, но с использованием цветового режима HSB вместо RGB. Обратите внимание, что красный, зеленый и синий цвета теперь определяются по-разному: в RGB красный определяется числом 9.0005 (255, 0, 0)

; в HSB это (360, 100, 100) .

HSB упрощает определение цветовых диапазонов, соответствующих описанию, подобному этому, что было бы сложнее сделать с помощью RGB:

• Темный, приглушенный красный . Для красного мы можем установить оттенок где-то между 350 и 360. Чтобы сделать его темным , мы можем установить яркость от 30 до 50. Насыщенность от 20 до 40 сделает его приглушенным .
• Ярко-голубой . Какие диапазоны оттенка, насыщенности и яркости вы бы выбрали, чтобы получить цвет, соответствующий этому описанию?

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

Теперь определите цветовую палитру HSB и примените ее к рисунку из предыдущих действий.

Цветовые палитры

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

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

Если вы не знаете, как начать упорядочивать свою цветовую палитру, попробуйте использовать Adobe Color Picker или Paletton!

HSB объяснил | geraldbakker.nl

HSB: полное разделение на оттенок, насыщенность и яркость

Введение

HSB является последней из четырех кодировок цветов, которые я объясню. Photoshop предоставляет еще два цветовых режима — Bitmap и Grayscale — но они не поддерживают цвет, а только черно-белый.

Возможно, вы знаете, что существует более старая альтернатива, называемая HSL. Он очень похож на HSB, но больше не является частью родного Photoshop. Вы можете загрузить фильтр с веб-сайта Adobe для преобразования RGB из HSB и HSL и в них. Однако невозможно прочитать значения HSL на панели «Информация» или установить ползунки HSL на панели «Цвет». По этой причине я придерживаюсь только HSB.

Я должен сделать одно важное замечание: невозможно создать файл изображения в цветовом режиме HSB. При создании нового файла можно выбрать один из цветов RGB, CMYK, LAB, Grayscale и Bitmap. ГСБ нельзя. Отсюда следует, что HSB предназначен «только для справки». В изображении, закодированном любым способом, мы можем прочитать значения HSB. Мы также можем выбрать цвет, установив определенные значения HSB. Но мы не можем создать изображение, закодированное в HSB.

Давайте сначала посмотрим, как работает HSB. Помните, что LAB разделяет яркость и цвет. HSB идет еще дальше: он также разделяет цвет на оттенок и насыщенность.

• H обозначает оттенок; он говорит нам, смотрим ли мы на красный, синий, фиолетовый, желтый и т. д. Это кодируется как степень в диапазоне от 0 до 359, как если бы мы смотрели на круг.
• S представляет насыщение; это говорит нам, насколько сильный цвет. Его значение может быть любым от 0 до 100, например, в процентах.
• B представляет яркость; B означает яркость (для справки, L в HSL означает легкость). Как и «S», значение третьего компонента находится в диапазоне от 0 до 100.

Рисунок 1

Abstract

См. рисунок 1 для HSB-представления того же фиолетового цвета, который мы использовали в статье LAB.

Таким образом, HSB не только дает нам возможность изменять яркость, сохраняя при этом тот же цвет, но также позволяет нам изменять оттенок, не касаясь насыщенности, и наоборот. Или это так? Ну, это не так просто. Поскольку изображение, закодированное в HSB, не может существовать, мы не можем выполнять обычные настройки (уровни, кривые и т. д.) для компонентов HSB. Мы не можем просто манипулировать буквой «S», чтобы изменить насыщенность изображения.

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

Свойства HSB

Начнем с наших обычных экспериментов.

Запустите Photoshop, откройте окно Color Picker. Установите для всех RGB значение 0 и прочитайте значения HSB.

Они… 0,0,0. В этом нет ничего удивительного, по крайней мере, для второго и третьего компонентов. Черный не имеет насыщенности и яркости. Он также не имеет оттенка, так что, честно говоря, первый компонент тоже равен 0.

Перейти к белому цвету, RGB = 255 255 255. Оказывается, что HSB = 0,0,100, что тоже не может быть неожиданностью. Нулевая насыщенность, полная яркость и отсутствие оттенка. Без дальнейших объяснений я могу заявить, что RGB 128,128,128 переводится в HSB 0,0,50.

Первое наблюдение. Для любого нейтрального цвета оттенок и насыщенность равны 0 в кодировке HSB.

Пока все хорошо. Но мы еще не видели настоящего цвета. Как насчет красного? Установите RGB на 255,0,0 и посмотрите, что произойдет. Яркость 100, насыщенность 100 и оттенок 0. По крайней мере два из них могут быть неожиданными. См. рис. 2.

Рисунок 2

Насыщенность 100 приемлема. Полностью красный, насыщение невозможно.

А как же яркость 100? Это не белый цвет, и полный красный цвет можно сделать светлее, добавив зеленый и/или синий. Почему этот ярко-красный цвет дает максимальную яркость?

Ответ: потому что яркость отличается от легкости. «B» в HSB на самом деле нечто иное, чем «L» в LAB.

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

Второе наблюдение: Для любого полноцветного красного, зеленого, синего, желтого, голубого и пурпурного в HSB яркость и насыщенность равны 100.

Трудно определить яркость словами. Если все основные цвета RGB и CMY имеют максимальную яркость, то что это? Просто чтобы увидеть механизм, установите R на 255 и немного увеличьте значения G и B. Красный станет светлее и менее насыщенным. Тем не менее, яркость остается равной 100. Если у цвета, закодированного по схеме RGB, по крайней мере один компонент имеет значение 255, то независимо от того, каковы два других значения, яркость равна 100.

Вы можете догадаться, каким будет вывод, но здесь другой эксперимент. Помните, что RGB 127 127 127 соответствует яркости 50. Теперь, начиная с этого момента, уменьшите любые два компонента RGB, оставив один на уровне 127. Следите за значением яркости. Видишь, что происходит? Яркость остается на уровне 50.

Третье наблюдение: в HSB яркость является самой высокой из R, G и B, отображаемой по шкале от 0 до 100. Это так просто.

А как насчет значения оттенка красного?

Это 0, как и для белого, серого и черного.

Почему 0?

Ответ: нет почему. Это 0 по определению. 0 красный. С тем же успехом он мог быть зеленого, синего или любого другого цвета. Ну, вероятно, радуга была использована в качестве примера. Цвет с самой высокой длиной волны и самой низкой частотой — красный. Таким образом, «H» начинается с красного, проходит через желтый, зеленый, синий, пурпурный и обратно к красному.

Как цвета распределяются по кругу — предмет простого упражнения. Снова установите для RGB значение 255,0,0. Обратите внимание на значение оттенка в HSB (0). Теперь установите RGB на 255,255,0 (желтый). Снова обратите внимание на значение оттенка (60). Продолжайте со всеми другими первичными и вторичными цветами. Смотрите, есть закономерность. Наше четвертое наблюдение касается H в HSB.

Четвертое наблюдение. Первичный и вторичный цвета имеют значение оттенка в соответствии со следующей таблицей:

H =     0 : красный

H =  60 : желтый

H = 120 : зеленый

H = 180 : голубой

3

3 H = 240 : Синий

H = 300 : Пурпурный

Если бы он существовал, H = 360 был бы красным. Но шкала останавливается на отметке 359, что так же близко к красному, как 1. См. рисунок 3 для графического представления.

Рисунок 3

Мы знаем, как работает яркость, мы знаем, как работает оттенок. А насыщенность?

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

Теперь, начиная с красного, переместите ползунок R наполовину влево. Посмотрите, что происходит со значением Saturation. Осталось 100. Переместите ползунок R еще дальше влево до очень низкого значения. G и B по-прежнему 0. Насыщенность? Все еще 100. Даже очень близко к черному остается насыщенность 100, если два компонента равны 0. Очевидно, Photoshop предполагает, что цвет полностью насыщен, если он «чистый», то есть не смешанный с другими цветами. Это верно независимо от того, насколько цвет близок к черному или белому (но, очевидно, не полностью черный или белый).

Проделайте то же упражнение, начиная с голубого. Теперь уменьшите зеленый и синий до любого другого значения, но больше 0. Посмотрите на насыщенность. Еще 100! Даже если зеленый и синий не равны, насыщенность остается равной 100, при условии, что красный остается равным 0.

Пятое наблюдение: любой цвет, у которого красный, зеленый и синий равен 0, а любой другой не равен 0, получает насыщенность 100 в модели HSB.

Можем ли мы прийти к формуле для насыщенности, как мы сделали для яркости?

Да, можем. Если у вас есть немного чувства к числам и их взаимосвязям, вы можете вывести их сами, но здесь я вам это покажу.

Насыщенность определяется как отношение между максимальной разницей между R, G и B и их максимальным значением. Чем ближе минимум и максимум, тем меньше максимальная разница и меньше насыщенность. Чем дальше минимум от максимума, тем выше насыщенность. Поместите в реальную формулу:

Шестое наблюдение: Насыщенность = ((Макс(R,G,B) — Мин(R,G,B)) / max(R,G,B)) * 100

(* 100) добавляется, потому что насыщенность отображается по шкале от 0 до 100. Обратите внимание, что формула зависит только от максимального и минимального значений R, G и B. Любое промежуточное значение не имеет значения.

У нас осталось последнее важное наблюдение.

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

Седьмое наблюдение: HSB — это не другое цветовое пространство, это такое же цветовое пространство, как RGB, но закодированное по-другому.

Взаимосвязь между RGB и HSB

RGB — это модель для электронных цветных устройств, таких как камеры и мониторы, CMYK основана на свойствах чернил, LAB пытается представить человеческое зрение. Однако HSB не соответствует базовому физическому миру. Это то же самое цветовое пространство, что и RGB, но с другим номером.

Именно эта разная нумерация делает HSB полезным, поскольку она разделяет оттенок, насыщенность и яркость.

Рисунок 4

Последнее упражнение. В Photoshop установите RGB на 200,120,60. Это дает несколько коричневато-оранжевый. См. рис. 4. Теперь, если кто-то попросит вас осветлить этот цвет, не меняя насыщенность и оттенок, не могли бы вы предоставить правильные значения RGB? Думаю, нет. По крайней мере, я не мог.

При использовании кодирования HSB назначение простое. Обратите внимание на значения HSB только что созданного цвета. Они 26,70,78. Теперь переключитесь на ползунки HSB на панели «Цвет» и переместите ползунок B вправо, например.