Цветовая модель hsb сообщение

Обновлено: 08.07.2024

Типы цветовых моделей

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

аппаратно-зависимые — цветовые модели данной группы описываю цвет применительно к конкретному, цветовоспроизводящему устройству (например монитору), — RGB, CMYK
аппаратно-независимые — эта группа цветовых моделей для того, чтобы дать однозначную информацию о цвете — XYZ, Lab
психологические — эти модели основываются на особенностях восприятия человека — HSB, HSV, HSL

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

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

Данная цветовая модель описывает цвет источника света (сюда можно отнести например экран монитора или телевизора). Из огромного множества цветов, в качестве основных (первичных) было выделено три цвета: красный (Bed), зеленый (Green), синий (Blue ). Первые буквы названий основных цветов образовали название цветовой модели RGB.

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

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

Важные точки и линии модели RGB

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

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

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

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

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

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

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

Что бы компенсировать эту проблему к этой триаде добавили четвертую краску черного цвета, она и добавила последнюю букву в названии цветовой модели С — Cyan (Голубой), М — Magenta (Пурпурный), Y — Yellow (Желтый), К — blacK (Черный). Все краски обычно обозначаются начальной буквой названия, но черную обозначили последней буквой, Почему? На этот счет есть несколько версий.

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

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

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

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

Для описания цвета в данной модели есть три параметра Hue (оттенок) — показывает положение цвета на цветовом круге и обозначается величиной угла от 0 до 360 градусов, Saturation (насыщенность) — определяет чистоту цвета (уменьшение насыщенности похоже на добавлене белого цвета в исходный цвет), Brightness (яркость) — показывает освещенность или затененность цвета (уменьшение яркости похоже на добавление черной краски). Первые буквы в названии этих параметров и дали название цветовой модели.

Модель HSB хорошо согласуется с человеческим восприятием: цветовой тон — длина волны света, насыщенность — интенсивность волны, а яркость — количество света.

Минусом модели HSB является необходимость конвертировать ее в RGB для отображения на экране монитора или в CMYK для печати.

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

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

В модели Lab цвет представлен тремя параметрами:

L — светлота
a — хроматический компонент в диапазоне от зеленого до красного
b — хроматический компонент в диапазоне от синего до желтого

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

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

Самое простое и понятное пространство используется для отображения черно-белого изображения. Цвет в данной модели описывается всего одним параметром. Значение параметра может быть в градациях (от 0 до 256) или в процентах (от 0% до 100%). Минимальное значение соответствует белому цвету, а максимальное — черному.

Индексные цвета

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

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

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

Можете назвать меня дураком, но я не смог найти в интернете ничего толкового про цветовую модель 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) заключается в выборе основного цвета из непрерывного цветового ряда (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*

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

Система цветопередачи RGB

Этот алгоритм оттенков выстраивается на 3 основных цветах:

R (red) – красный;
G (green) – зеленый;
B (blue) – голубой.

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

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

Цветовая схема CMYK

Состоит из 4 основных цветов, расшифровка CMYK:

С (сyan) – синий – можно охарактеризовать как насыщенный голубой;
M (magenta) – малиновый – цвет, приближенный к темно-розовому или фуксии;
Y (yellow) – желтый – ортодоксальный привычный цвет без понижения или повышения тона;
K (key) – черный.

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

На данный момент именно эта модель является стандартом в офсетной полноцветной печати в Европе, США, Японии. В большинстве случаев используется цветовая схема CMYK, при которой оттенки исчисляются от 0 до 100, однако есть и другая модель – CMYK 255. В ней оттенки исчисляются от 0 до 255. Приведем пример.

Допустим, требуется получить чисто черный, тогда показатели должны быть максимальными (в стандартной схеме – по 100), если же белый (то есть отсутствие цвета) – 0. Регулируя каждый из 4 показателей, можно добиться требуемого оттенка. Обычно для дизайнеров помощниками выступают специальные инструменты, как, например, пипетка в редакторе Photoshop. Она определяет не просто вид конкретного оттенка, но и его цветовую схему. Тогда для достижения идентичного результата (при множественном тираже или различных вариантах корпоративной продукции) достаточно знать цифровое значение каждого цвета в системе.

Цветовое пространство HSB

Эта модель разработана для первых графических редакторов еще в 90-х годах. Ее отличием является трехканальное построение спектра. Она определяет не просто какой-то оттенок смешением красок, данный тип цветопередачи основан на показателях цвета, а именно:

Hue – цветовой тон. Выбирается один из спектра радуги, имеет радиальное расположение, определяется углом от 0 до 360 градусов на окружности с оттенками. С другой стороны, параметр эквивалентен длине световой волны, которую воспринимает человеческое зрение.
Saturation – насыщенность. Регулирует контрастность оттенка по отношению к печатному или виртуальному носителю. Это как при подмешивании белой краски. Наиболее насыщенные цвета находятся по краям круга, чем ближе к центру, тем они становятся более бледными. Соответствует интенсивности цветовой волны.
Brightness – яркость, где 0 – это полностью белый, а 100 – черный. Данный параметр задает освещенность цветовой волны.

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

В новом материале из серии статей про цветовые модели мы познакомимся с моделью 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 максимальная светлота всегда соответствует белому цвету, поскольку передаёт предельную силу света.

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