Почему цветовую модель hsb называют перцепционной кратко

Обновлено: 30.06.2024

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

Цветовая модель HSB является наиболее простой для понимания. Она равно применима и для аддитивных, и для субтрактивных цветов. HSB — это трехканальная модель цвета, так как представлена тремя компонентами (тон, насыщенность и яркость). Спектральные цвета располагаются на цветовом круге. Цветовой тон характеризуется положением на цветовом круге (построен на основе цветового круга Манселла) и определяется величиной угла в диапазоне от 0 до 360 градусов. По краю цветового круга располагаются максимально насыщенные цвета (100 %), а по мере перемещения к центру круга их насыщенность уменьшается до минимума (0 %). Цвет с уменьшением насыщенности осветляется, как будто к нему прибавляют белую краску. При значении насыщенности 0 % в центре круга любой цвет становится белым. Все цвета цветового круга имеют максимальную яркость (100 %) и ярче уже быть не могут (рис. 3.8).

Рисунок 3.8. Цветовая модель HSB

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

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

Рисунок 3.9. Хроматические (слева) и ахроматические (справа) цвета

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

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

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

Модель HLS (Hue — оттенок, Lightness — осветление, Saturation — насыщенность) является вариантом модели HSB. В этих моделях цветовые параметры оттенок и насыщенность являются общими. Различие состоит в замене нелинейного компонента Brightness (яркость) на линейный компонент Lightness (интенсивность), который изменяется в диапазоне от 0 до 100 процентов.

Цветовые модели CIE XYZ и CIE L*a*b

Международной комиссией по освещению (CIE) были разработаны цветовые модели CIE XYZ и CIE L*a*b. Достоинством этих моделей является независимость от способа производства цвета, в их системе измерения можно описывать как субтрактивные цвета печати, так и аддитивные цвета, излучаемые монитором. Поэтому эти модели используются для того чтобы определять аппаратно независимые цвета, которые могут правильно воспроизводиться устройствами любого типа — сканерами, мониторами или принтерами.

Рисунок 3.10. Цветовая модель CIE XYZ

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

В 1920 году была разработана цветовая пространственная модель CIE L*a*b* (Communication Internationale de I'Eclairage — международная комиссия по совещанию; L, a, b — обозначения осей координат в этой системе). CIE L*a*b* представляет собой улучшенную цветовую модель CIE XYZ. L*a*b* — трехканальная цветовая модель. Любой цвет данной модели определяется светлотой (L) и двумя хроматическими компонентами: параметром a, который изменяется в диапазоне от зеленого до красного, и параметром b, изменяющимся в диапазоне от синего до желтого (рис. 3.11).

Рисунок 3.11. Цветовая модель CIEL*a*b*

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

По сравнению с цветовой моделью XYZ цвета CIE L*a*b* более совместимы с цветами, воспринимаемыми человеческим глазом. Модель CIE L*a*b* используется некоторыми программами (например, Adobe Photoshop) в качестве модели-посредника при любом конвертировании из модели в модель, а также при конвертировании цветного изображения в оттенки серого.

Рисунок 3.8. Цветовая модель HSB

Рисунок 3.9. Хроматические (слева) и ахроматические (справа) цвета

Цветовые модели CIE XYZ и CIE L*a*b

Рисунок 3.10. Цветовая модель CIE XYZ

Рисунок 3.11. Цветовая модель CIEL*a*b*

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

История HSB

Цветовую модель HSB предложил в середине 1970-х годов Элви Рэй Смит, один из основателей компании Pixar. Он тогда был сотрудником Xerox Parc, знаменитого исследовательского центра Xerox, и вместе с коллегами работал над одним из первых компьютерных графических редакторов — SuperPaint (вот видео про него).

Как устроена модель HSB

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

Как считаете, к какому типу моделей относится модель HSB? Правильный ответ — ни к какому из вышеперечисленных. В ней цвета получают не смешением или вычитанием цветов, а за счёт управления тремя параметрами:

Hue — цветовой тон (хроматический цвет)
Saturation — насыщенность
Brightness — яркость

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

Hue (цветовой тон)

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

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

Полная окружность состоит из 360°. Каждому градусу соответствует определённая координата на окружности. 0° — это красный цвет. 60° — жёлтый. А, скажем, 240° — синий. Именно за это значение и отвечает параметр Hue в данной модели.

Saturation (насыщенность)

Но как это работает в цветовом пространстве? Цветовой тон мы представляем в виде круга. Чистые спектральные цвета — это цвета, которые находятся непосредственно на окружности. По мере отдаления от края к центру цвета как бы тускнеют.

То есть внутри цветового пространства насыщенность — это отдалённость от центра. При 100% отдалённости вы оказываетесь на краю круга. При 0% отдалённости — в центре. Но какой цвет мы получим, находясь в центре окружности?

Чтобы ответить на этот вопрос, нам и нужен третий параметр — яркость.

Brightness (яркость)

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

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

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

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

Применение HSB

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

Даже если вы не работаете с HSB как с основной моделью, в ней удобно анализировать освещённость и насыщенность цветов.

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

То есть, может быть контраст по насыщенности.

А может быть контраст по освещённости.

Похожая цветовая модель: HSL

Кстати, существует очень похожая на HSB цветовая модель HSL.

Она также представляет цвет с помощью трёх параметров. Два из них такие же, как в модели HSB — это, как вы могли догадаться, цветовой тон и насыщенность. А вот третий параметр отличается.

В модели HSL это светлота, Lightness В некоторых случаях она ещё называется интенсивностью (Intensity). Отличие этой модели в том, что если в HSB белый цвет представлялся точкой в центре в верхней части цилиндра, а максимальное значение яркости при максимальной насыщенности соответствовало чистому спектральному цвету, в HSL максимальная светлота всегда соответствует белому цвету, поскольку передаёт предельную силу света.

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

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

Разберём-ка все буквы по порядку

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

Теперь о том, чем так сильно отличаются эти 3 координаты.

Если вы когда-нибудь кодили в HTML и CSS, то, возможно, сталкивались с моделью RGB, где любой цвет создаётся на основе 3 координат: (1) насколько цвет красный ( R ), (2) насколько цвет зелёный ( G ) и насколько цвет синий ( B ). Сначала может показаться, что тот, кто это придумывал, явно находился под кайфом, но на самом деле, схема-то вполне прямолинейная и цельная — настолько, что по умолчанию является тем языком, на котором компьютер говорит о цвете.

Вот только если у компьютера всё просто, то это не значит, что у человека тоже. И тут в игру вступает HSB.

HSB (от англ. hue-saturation-brightness) — это тон, насыщенность и яркость; более ориентированная на человека модель для описания цвета. Чем же она так хороша? А вот чем: в ней используются те характеристики, которые сами собой приходят нам в голову, когда мы описываем цвет, например. Так, а знаете что? Я лучше покажу.

Тон — это любая цифра от 0 до 360. Тон измеряется в градусах, как и окружность (потому что — осторожно, спойлер! — вокружности тоже 360°). Помните цветовой круг? Тон — это любое место на нём.

Цветовой круг или тоновый круг

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

Красный — 0°
Зелёный — 120°
Синий — 240°
Красный — также 360°, что абсолютно идентично 0°

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

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

Хотите взглянуть?

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

Brightness, яркость = яркость, прикиньте

Яркость — это цифра от 0 до 100. Как и насыщенность, её иногда указывают в процентах. Довольно очевидно, что это значит, но не тут-то было.

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

Запутались? Давайте немного переосмыслим. Представьте себе, что яркость — это лампочка накаливания. 0% значит, что лампочка не горит (и в нашей комнате темно, хоть глаз коли). 100% значит, что лампочка горит на полную мощность. Возможно, 100%-ная насыщенность — это яркий цвет или, если свет и до этого был белым, то при 100%-ной насыщенности он абсолютно белый.

Итак, если быть кратким: мы можем описать любой цвет с помощью трёх координат:

Всё понятно? Отлично.

HSB на практике

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

Цветовые вариации тона

Даже сдвиг тона на 30° до 210° даёт крутой эффект. Стало светлее, веселее, и не так строго. Что-то вроде оформления в twitter, однако это лишь первый шаг.

Настройте видимость с помощью насыщенности

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

Например, взгляните на такую вариацию цвета в лого компании Google. Я увеличил насыщенность синего до 90%, и, как видите, он тут как бельмо на глазу.

Насыщенность синего 90%

Насыщенность синего 70%

В нормальной версии лого баланс между разными цветами выдержан гораздо лучше .

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

Теперь давайте перейдём к одному из самых удивительных фактов об HSB и к тому, что это значит.

Чёрный цвет не противоположен белому

Вот как делается чёрный и белый цвет в HSB:

Чёрный: снизьте яркость до 0%. Тон и насыщенность могут быть какие угодно.
Белый: увеличьте яркость до 100%, а насыщенность снизьте до 0%. Тон также может быть каким угодно.

Это значит — удивительно даже — что (в цветовой модели HSB) чёрный не противоположен белому.

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

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

Добавление белого выглядит так:

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

Эти две стрелки никак не исключают друг друга! Чёрный и белый в HSB не противопоставлены.

В практическом плане, более тёмные оттенки, полученные путём добавления чёрного, тусклее, чем их более светлые вариации.

Более тёмные оттенки выглядят тускло

Вот вам хороший толчок. Попробуйте вместо добавления чёрного убрать белый. Другими словами, одновременно:

Или вот, если диаграммы вам больше по душе:

Двигаемся от одного красного к менее выбеленному красному.

Это даст вам более богатые тёмные оттенки:

Более тёмные оттенки выглядят богаче

Дополнительно: В чём разница между HSL и HSB?

Те из вас, кто занимаются front-end разработкой, возможно, знают, что в CSS используется цветовая модель HSL (от англ. hue, saturation, lightness — тон, насыщенность, светлота ). Вау. Что-то мне это смутно напоминает. HSB и HSL — это одна и та же модель?

Если коротко, то нет. Но они очень похожи.

Вы же теперь эксперты в HSB, поэтому долго объяснять не придётся: HSL — это абсолютно то же самое, что и HSB, с той лишь разницей, что чёрный и белый здесь противопоставлены друг другу.

Итак, в HSL:

Чтобы получился чёрный, снизьте светлоту до 0% (тон и насыщенность могут быть какие угодно)
Чтобы получился белый, увеличьте светлоту до 100% (тон и насыщенность могут быть какие угодно)

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

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

Итак, показатель светлоты в HSL — это странная смесь насыщенности и яркости в HSB, которая зависит от степени освещённости!

Как бы то ни было, система, в которой чёрный и белые цвета противопоставлены друг другу, может показаться чуть логичнее, однако во всех современных программах для создания UI дизайна (Sketch, Figma и Adobe XD) используется HSB, а не HSL. И честно говоря, именно в этих программах мы выбираем и настраиваем цвета. Поэтому давайте не будем сильно загоняться: если вы хотите перенести значения цветов из дизайна в код, то просто используйте значения в формате hex, запутаться в них еще проще, чем в обеих моделях (зато их, по крайней мере, можно копировать-вставить)!

Конус HSB и двойнос конус HSL
Tон (hue), насыщенность (saturation), значение (value) и светлота (lightness)
Благодарность SharkD за картинку в Wikipedia

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

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

Перцепционные цветовые модели (HSB и другие)
Для устранения аппаратной зависимости, присутствующей в аддитивных и субтрактивных цветовых моделях, были разработаны ряд перцепционных (интуитивных) цветовых моделей, в основу которых положено раздельное восприятие цветности и яркости света, как воспринимает свет глаз человека. Прототипом большинства цветовых моделей, использующих эту идею, является HSV-модель, на основе которой позже появились HSB, HSL и другие модели. Общим для них является то, что цвет в них задается не в виде смеси трех основных цветов, а путем задания двух компонентов (например, в модели HSB это цветовой тон - Hue, и насыщенность - Saturation). Третий параметр во всех этих моделях различными способами задает яркость изображения и обозначается как В (Brightness - в модели HSB), L (Lightness - в HSL) или V (Value - в HSV).
Модель HSB или ее ближайший аналог - HSL - представлены в большинстве современных графических редакторов. И именно модель HSB, также представленная в Photoshop, наиболее точно соответствует способу восприятия цветов человеческим глазом (из уже рассмотренных моделей), и ее мы рассмофим более подробно.
Под цветовым тоном (Н - Hue) понимается свет с доминирующей длиной волны и для его описания обычно используется, собственно, название цвета, например, синий или желтый. В графической интерпретации этой модели каждый цвет занимает определенное место на окружности и описывается углом в диапазоне 0—60. В положении 0 находится красный цвет, 120 - зеленый цвет, 240 - синий (это первичные цвета). Вторичные цвета находятся между ними. Дополнительные цвета находятся на диаметрально противоположных сторонах цветового круга. При их смешении образуется черный цвет (при печати красками) или белый (при излучении на мониторе). Это максимально контрастные цвета и действуют они на глаз раздражающе.
Цвета, равноотстоящие друг от друга, образуют триады, дающие гармоничное сочетание цветов и насыщенную оттенками палитру. Однако понятие цветового тона не дает полного описания цвета. Кроме доминирующей длины волны, в формировании цвета участвуют и другие длины волн. Соотношение между основной, доминирующей длиной волны и всеми остальными длинами волн, образующими "серые вкрапления", называется насыщенностью. Его значение изменяется от 0 % (серый цвет) в центре круга до 100 % (полностью насыщенный) на окружности.
Третий параметр - яркость - никоим образом не влияет на цветность, но от нее зависит, как сильно цвет будет восприниматься глазом, т.е. яркость характеризует интенсивность, с которой энергия света воздействует на рецепторы глаза. При нулевой яркости мы не увидим ничего, и любой цвет будет восприниматься как черный, а максимальная яркость вызывает ощущение ослепительно белого цвета. Величина яркости также измеряется в процентах от 0е (черный) до 100 (белый). Данная компонента является нелинейной, что соответствует природе глаза.
Модель HSB носит абстрактный характер, т.к. ее компоненты на практике измерить невозможно. Чаще всего компоненты модели получают путем математического пересчета измеренных значений RGB-модели. Как следствие, в наследство от RGB-модели она получает и ограниченное цветовое пространство. Кроме того, яркость и цветовой тон не являются полностью независимыми параметрами, т.к. значительное изменение яркости влияет на изменение цветового тона, что приводит к нежелательным эффектам в виде цветовых отливов (сдвигов). Вместе с тем HSB-модель обладает двумя важными преимуществами: большей аппаратной независимостью (по сравнению с двумя предыдущими моделями) и более простым и интуитивно понятным механизмом управления цветом.

Читайте также: