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

Определения и обозначения

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

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

Насыщенность — степень чистоты цвета: от полного отсутствия цветового оттенка до максимально насыщенного цвета. Обычно её задают в процентах от 0% до 100%. Этот параметр позволяет сделать цвет приглушённым или, наоборот, ярким по оттенку.

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

Как это устроено

В модели HSB цвет описывают тремя параметрами, потому что выбор оттенка, его чистота и освещённость — разные задачи. Тон отвечает на вопрос «какой это цвет?», насыщенность — «насколько он чистый?», а яркость — «насколько он светлый?». Разделение удобно при подборе цвета: можно изменить одну характеристику и сохранить остальные. Например, затемнить зелёный, не превращая его в синий.

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

Насыщенность показывает, насколько сильно цвет отличается от серого. При S = 100% выбранный тон выражен максимально, а при постепенном уменьшении S цвет становится всё более приглушённым. При S = 0% цветовой оттенок исчезает, поэтому получается серый цвет. Тон при этом не может проявиться: изменение H не добавит оттенок, пока насыщенность остаётся нулевой.

Яркость меняет количество света в представлении цвета. Если уменьшать B, заданный цвет становится темнее и при B = 0% превращается в чёрный независимо от тона и насыщенности. При максимальной яркости цвет наиболее светлый для своих H и S, но это не всегда белый: белый получается при нулевой насыщенности и максимальной яркости. Значит, тёмный цвет и серый возникают по разным причинам — из-за малой яркости и малой насыщенности соответственно.

Чтобы получить конкретный цвет, нужно задать сочетание H, S и B, а не только один параметр. Сначала выбирают тон, затем определяют чистоту оттенка и его освещённость. Изменяя только S, можно приглушить цвет, а меняя только B — сделать его темнее или светлее. Такой способ корректировки сохраняет выбранный оттенок и избавляет от необходимости подбирать цвет заново.

Параметры цветовой модели HSB

В таблице сначала найдите нужный параметр, а затем проверьте его диапазон и крайние случаи. При определении цвета учитывайте все значения H, S и B одновременно. Если один параметр равен крайнему значению, он может сделать остальные несущественными: например, при B = 0% результат всегда чёрный.

Разбор задач

Задача 1. Определить цвет при H = 0°, S = 100%, B = 100%.

Здесь нужно сначала определить оттенок по тону, а затем проверить, не меняют ли его насыщенность и яркость. Значения S и B максимальны, поэтому цвет будет чистым и максимально ярким для выбранного тона. Рассуждение удобно разбить на последовательные шаги.

1. На цветовом круге H = 0° соответствует красному тону.
2. При S = 100% красный оттенок максимально насыщен.
3. При B = 100% он имеет максимальную яркость.

Ответ: яркий, максимально насыщенный красный цвет.

Задача 2. Сравнить A(H = 120°, S = 100%, B = 100%) и B(H = 120°, S = 50%, B = 100%).

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

1. H = 120° задаёт зелёный тон для обоих цветов.
2. У цвета A насыщенность 100%, а у B — 50%.
3. Значит, A — чистый насыщенный зелёный, а B — более приглушённый зелёный с примесью серого.

Ответ: цвет B менее насыщенный; тон и яркость у двух цветов одинаковы.

Задача 3. Из ярко-синего H = 240°, S = 100%, B = 100% получить сначала пастельный голубой, затем серый.

Здесь важно изменить параметры так, чтобы на первом шаге получить светлый приглушённый оттенок, а на втором убрать цветовой оттенок полностью. Один лишь переход от синего к голубому потребует изменить H. Для пастельности уменьшают S, сохраняя высокую яркость; для серого устанавливают насыщенность в ноль.

1. Начальный цвет задают H = 240°, S = 100%, B = 100°.
2. Для голубого сдвигают H примерно к 195°–200°, затем уменьшают S, например до 35%, оставляя B = 100%. Так оттенок станет более мягким и светлым.
3. Чтобы получить серый, устанавливают S = 0%. При B = 100% получится светло-серый; значение H теперь не влияет на результат.

Ответ: сдвинуть тон к голубому и уменьшить насыщенность; затем установить S = 0%. Для более тёмного серого дополнительно уменьшают B.

Типичные ошибки

Путать тон с насыщенностью. Иногда кажется, что более насыщенный цвет — это просто другой оттенок, потому что он выглядит выразительнее. Но тон выбирает цвет на круге, а насыщенность показывает его чистоту. Проверьте себя: если меняется H, меняется оттенок; если меняется S, оттенок становится приглушённым или чистым.

Считать, что H = 360° задаёт новый цвет. Ошибка возникает, если воспринимать диапазон как прямую шкалу, а не как круг. Полный оборот возвращает к той же точке, что и 0°. Проверка простая: представьте замкнутый круг и сравните его начало с концом.

Думать, что уменьшение яркости делает цвет серым. Затемнение нередко воспринимают как потерю цвета, хотя это изменение другого параметра. Уменьшение B делает цвет темнее, а уменьшение S приближает его к серому; при B = 0% получается чёрный. Чтобы проверить вывод, мысленно оставьте S прежним и меняйте только яркость.

Определять цвет по одному значению. Например, по одному H нельзя понять, будет ли оттенок ярким, приглушённым или почти чёрным. Это происходит, когда остальные параметры упускают из виду. Проверяйте запись целиком: учитывайте H, S и B, а также особые случаи S = 0% и B = 0%.

Связь с другими темами

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

Что запомнить

• HSB расшифровывается как Hue, Saturation, Brightness.
• Тон задаёт положение цвета на цветовом круге.
• Насыщенность показывает степень чистоты цвета.
• Яркость показывает степень его освещённости.
• При S = 0% цвет является оттенком серого, и тон несущественен.
• При B = 0% любой цвет становится чёрным.
• Один и тот же цвет определяется совместным значением H, S и B.