HSB: тон, насыщенность, яркость
https://t.me/uxidesignВступление
HSB - аббревиатура от Hue (тон), Saturation (насыщенность) и Brightness (яркость).
Возможно, вы знаете, что существует более старая альтернатива, цветовая модель HSL. Она очень похожа на HSB, но больше не является частью Photoshop. Вы можете загрузить фильтр с сайта Adobe, чтобы иметь возможность конвертировать между RGB, HSB и HSL. Однако невозможно узнать значения HSL на панели «Информация» или установить слайдеры HSL на панели «Цвет». По этой причине я пользуюсь только HSB.
Одно важное замечание, которое я должен сделать, заключается в том, что невозможно создать файл изображения в цветовом режиме HSB. При создании нового файла можно выбрать из RGB, CMYK, LAB, Grayscale и Bitmap. HSB невозможно. Из этого следует, что HSB является моделью «только для справки». В цвете изображения, закодированном любой моделью, мы можем считывать значения HSB. Мы также можем выбрать цвет, установив определенные значения HSB. Но мы не можем создать изображение, закодированное в HSB.
Теперь давайте посмотрим, как работает HSB. Помните, что LAB выделяет яркость и цвет. HSB идет еще дальше: он также разделяет цвет на оттенок и насыщенность.
- H определяет оттенок; он говорит нам, смотрим ли мы на красный, синий, фиолетовый, желтый и т. д. Это значение кодируется в формате градусов, от 0 до 359, как если бы мы смотрели на круг.
- S определяет насыщенность; он говорит нам, насколько сильный цвет. Его значение может составлять от 0 до 100, как процент.
- B - яркость. Как и «S», значение третьего компонента находится в диапазоне от 0 до 100.
Например, вот так выглядит фиолетовый в формате HSB:
Таким образом, модель HSB не только дает нам возможность изменять яркость, сохраняя тот же цвет, но и позволяет изменять оттенок, не касаясь насыщенности и наоборот. Но есть ли у нас эта возможность на самом деле? Не совсем. Поскольку изображение, кодированное в HSB, не может существовать, мы не можем выполнять его обычные настройки параметров HSB. Мы не можем просто манипулировать «S», чтобы изменить насыщенность изображения.
Тем не менее, стоит изучить три компонента HSB и понять их соотношения с другими цветовыми моделями.
Свойства HSB
Начнем с наших обычных экспериментов.
Запустите Photoshop, откройте окно выбора цвета. Установите для всех RGB значение 0 (ноль) и запишите значения HSB.
Они все... 0, 0, 0. Не удивительно, по крайней мере, не для второго и третьего компонентов. Черный не имеет насыщенности и яркости. У него также нет оттенка, так что первый компонент тоже 0.
Теперь используйте белый цвет, RGB = 255 255 255. Похоже, что HSB = 0,0,100, что тоже не может удивить. Нулевая насыщенность, полная яркость и отсутствие оттенка. Без дальнейших объяснений могу утверждать, что RGB 127,127,127 переводится в HSB 0,0,50.
Первый вывод. Для любого нейтрального цвета, оттенок и насыщенность равны нулю в формате HSB.
Пока всё ясно. Но мы еще не видели реального цвета. Как насчет красного? Установите RGB 255,0,0 и посмотрите, что произойдет. Яркость 100, насыщенность 100 и Оттенок 0. По крайней мере два значения могут быть неожиданными.
Насыщенность 100 является понятным. Красный на максимум, больше насыщения не возможно.
Но как насчет яркости 100? Это не белый цвет, и красный, безусловно, может стать легче, добавив зеленый и / или синий. Почему этот ярко-красный результат достигается максимальной яркостью?
Ответ таков: поскольку яркость отличается от легкости. «B» в HSB - это нечто иное, чем «L» в LAB.
Попробуйте полностью зеленый и синий, а яркость - 100. Тоже самое для промежуточных цветов желтый, голубой и пурпурный.
Второй вывод: для любого полноцветного красного, зеленого, синего, желтого, голубого и пурпурного значения яркости и насыщенности в формате HSB равны 100.
Трудно определить яркость на словах. Если все основные цвета RGB и CMY имеют максимальную яркость, то что это? Чтобы понять, установите R в 255 и немного увеличьте значения G и B. Красный станет легче и менее насыщен. Тем не менее, яркость остается равной 100. Если хотя бы один из параметров в RGB будет равен 255, то в системе HSB яркость всегда будет равна 100.
Вы уже можете понять, каков будет вывод, но вот ещё другой эксперимент. Помните, что RGB 127,127,127 отображается на уровне яркости 50? Теперь, учитывая это, уменьшите любые два компонента RGB, сохранив один из них 127. Просмотрите значение яркости. Смотрите, что происходит? Яркость остается равной 50.
Третий вывод: в HSB параметр яркости является самым высоким из R, G или B, отображаемый по шкале от 0 до 100. Всё просто.
Теперь, как насчет значения тона красного?
Оно равно нулю, точно также, как у белого, серого и черного.
Почему 0?
Ответ: просто так. По определению это 0. 0 - красный. Это может быть зеленый, синий или любой другой цвет. Ну, вероятно, радуга была использована в качестве образца. Цвет с наивысшей длиной волны, самая низкая частота красного цвета. Таким образом, «H» начинается с красного цвета, проходит через желтый, зеленый, синий, пурпурный и обратно в красный.
То, как цвета разделены по кругу, является предметом простого упражнения. Снова установите RGB на 255,0,0. Обратите внимание на значение оттенка в HSB (0). Теперь установите RGB в 255 255,0 (желтый). Снова обратите внимание на значение Hue (60). Продолжайте делать тоже самое со всеми другими первичными и вторичными цветами. Видите, всё логично. Наше четвертое наблюдение касается H в HSB.
Четвертый вывод: первичные и вторичные цвета имеют свой тон в соответствии со следующей таблицей:
H = 0: красный
H = 60: желтый
H = 120: зеленый
H = 180: голубой
H = 240: синий
H = 300: пурпурный
Если бы существовало значение H = 360, это был бы красный. Но величина заканчивается на 359, которая близка к красному цвету.
Мы знаем, как работает яркость, мы знаем, как работает тон. Как насчет насыщения?
Saturation - насыщенность
Как мы уже поняли, полный красный, зеленый и синий имеют насыщенность 100. Тоже самое можно сказать и о промежуточных цветах желтого, голубого и пурпурного.
Теперь, начиная с красного цвета, переместите ползунок R влево. Посмотрите, что происходит со значением Saturation. Оно остается равное 100. Переместите ползунок R еще дальше до очень низкого значения. G и B все еще 0. Насыщенность? Всё еще 100. Даже очень близко к черному насыщенность остается равна 100, если два компонента равны 0. По-видимому, Photoshop предполагает насыщенный цвет, если он «чист», что означает: не смешивается с другими цветами. Это верно независимо от того, насколько близок цвет к черному или белому (но явно не полностью черный или белый).
Сделайте то же самое, начиная с голубого. Теперь уменьшите как зеленый, так и синий до любого другого значения, но больше 0. Посмотрите на насыщенность. Всё еще 100! Даже если зеленый и синий не равны, насыщенность остается равной 100, при условии, что красный цвет остаётся нулевым.
Пятый вывод: любой цвет с одним значением из красного, зеленого или синего равным нулю, а любым другим выше нуля, получает Saturation 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 делает её полезной.
Сделайте мне одолжение и выполните последнее упражнение.
В Photoshop установите RGB на 200, 120, 60. Это дает несколько коричневатый оранжевый цвет.
Теперь, если кто-то попросит вас сделать этот цвет светлее, не изменяя насыщенность и оттенок, можете ли вы предоставить правильные значения RGB? Наверное, нет. По крайней мере, я не могу.
Используя модель HSB, такое редактирование является простым. Обратите внимание на значения HSB цвета, который мы только что создали. Это 26,70,78. Теперь переключитесь на ползунки HSB на панели «Цвет» и переместите ползунок «B» вправо, например, до 100. Готово!
Полученные значения RGB составляют 255,154,76. Обратите внимание, что R теперь имеет максимальное значение. Любая попытка сделать цвет еще легче, не меняя оттенка и насыщенности, потерпит неудачу, потому что мы можем только увеличить зеленый и синий цвет, что изменит соотношение между тремя параметрами и тем самым изменит оттенок.