Цветовая модель HSB: рекомендации из первых уст

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

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

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

Если вы уже в курсе, что означают буквы H, S и B, можете сразу переходить к пункту «HSB на практике» ниже по странице.

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

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

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

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

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

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

Hue, тон = «Цвет радуги»

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

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

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

«А что же делать с чёрным? Белым? Серым?» Не мчите вперёд паровоза, ребята. Я же говорил, попозже мы и это узнаем.

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

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

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

Saturation, насыщенность = «Красочность»

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

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


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

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

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

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

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

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

• Тона: определенного цвета на цветовом круге, от 0° до 360°
• Насыщенности: того, как много в нём цвета, от 0% до 100%
• Яркости: насколько ярко горит наша «лампочка», от 0% до 100%

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

HSB на практике

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

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

Во-первых, тон — это отличный способ создавать разные вариации цвета. Ведь в диапазоне от 0° до 360° можно остановиться где угодно. Зачем оставлять синий цвет просто «синим», когда можно без особых усилий получить неплохие его вариации, просто немного сдвинувшись вверх или вниз по кругу?


Здесь мы начали с очень стандартного синего, повернувшись сразу на 240°. Но дабы не выбирать самый унылый цвет из всех возможных, мы решили его немного оживить.

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

Усиление тона до 240° даёт цвет индиго. Небольшой сдвиг на 20° — и вот уже смотрится совсем по-другому, покруче, и может неплохо сочетаться с неоном или тёмным фоном, так можно придать лёгкую нотку женственности. И так далее, вы поняли.


То же самое с красным. Сложный цвет, стоит только взяться — и уже проблемы. Он супер яркий и супер дерзкий. Однако всё зависит от того, чего мы хотим добиться — ну, допустим, сделать какое-нибудь сообщение об ошибке — тогда можно добавить в красный совсем чуть-чуть розового (опустившись по тону на 10°), и он станет приятнее. А для более сдержанного варианта можно подмешать немного оранжевого.

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

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

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

Если в вашем UI есть цвет, который перетягивает на себя всё внимание, то исправить это можно, просто снизив насыщенность.

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

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

Смотрите, как выпирает этот синий. Если вы не замечаете, попытайтесь расслабить взгляд и смотрите на лого в течение нескольких секунд. Едва ли не сразу на фоне остальных букв проступят «G» и «g».

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

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

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

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

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

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

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

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

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

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

Переходим от одного красного к более «выбеленному» красному

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

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

Переходим от одного красного к более «чёрному» красному.

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

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

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

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

• Увеличьте насыщенность

• Снизьте яркость

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

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

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

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

Убрать белый — то есть «обогатить» свои более тёмные оттенки — «правильный» путь к созданию более тёмных цветовых вариаций более чем в 95% случаев.

Дополнительно: В чём разница между 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 в сети. Если у вас остались какие-нибудь вопросы по теме или вы вдруг нашли ресурс получше и можете поделиться ссылочкой, стучите. И помните, что вам в первом классе говорила училка: задавать вопросы не глупо, глупо их не задавать.