Что такое HSB: тон, насыщенность и яркость простыми словами

HSB — это способ описать цвет через цветовой тон (hue), насыщенность (saturation) и яркость (brightness). Модель удобна тем, что разделяет три вопроса, которые ваш глаз задаёт и без неё: к какому семейству относится цвет, насколько он интенсивный и насколько светлым кажется.

Именно поэтому Palette Lab использует HSB в играх с цветом. HEX-код никто не запоминает. Двигать ползунки тона, насыщенности и яркости гораздо ближе к тому, как дизайнеры и художники правят цвет в настоящих программах.

Если вы искали «что такое HSB», «цветовая модель HSB», «HSB или HSV» либо «чем HSB отличается от HSL», короткий ответ такой: HSB — это цветовая модель, которая позволяет выбирать и настраивать цвет по зрительным качествам, а не через каналы красного, зелёного и синего.

Что означает цветовая модель HSB

Модель HSB описывает цвет тремя значениями:

• H — цветовой тон (Hue): обычно угол от 0 до 360 градусов.
• S — насыщенность (Saturation): обычно процент от 0% до 100%.
• B — яркость (Brightness): обычно процент от 0% до 100%.

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

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

Цветовой тон: семейство цвета

Тон — это положение цвета на цветовом круге. Красный, жёлтый, зелёный, голубой, синий и пурпурный — это решения по тону.

Когда ответ в игре с цветом кажется совсем мимо, первым делом стоит проверять именно тон. Цвет может иметь идеальную яркость и насыщенность, но если тон ушёл в синий вместо голубого, вся попытка воспринимается как ошибка.

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

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

Насыщенность: насколько цвет живой

Насыщенность описывает, сочный цвет или приглушённый. Сильно насыщенный оранжевый кричит; слабо насыщенный оранжевый превращается в бежевый, коричневый или почти серый.

В экстракторе палитры именно насыщенность объясняет, почему два цвета с близким тоном ведут себя в интерфейсе совершенно по-разному. Один работает как цвет главной кнопки, а другой годится только в фон.

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

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

Яркость: насколько цвет светлый

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

Если хотите набирать больше очков в играх Palette Lab, к концу раунда сбавляйте темп и правьте яркость отдельно от тона.

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

HSB и HSV — это одно и то же?

В большинстве дизайнерских и программистских контекстов HSB и HSV — одна и та же цветовая модель. HSV расшифровывается как Hue, Saturation, Value; HSB — как Hue, Saturation, Brightness. «Value» и «яркость» обычно два названия для одного и того же третьего канала.

Часто встречаются такие обозначения:

• HSB: тон, насыщенность, яркость
• HSV: тон, насыщенность, значение
• HSBA / HSVA: те же модели плюс альфа-канал прозрачности

Понятие одно, но программы расходятся в названиях, диапазонах значений и округлении. Один редактор показывает тон от 0 до 360, а какой-нибудь API нормализует тон, насыщенность и яркость к диапазону 0–1. Проверяйте ожидаемый формат, прежде чем переносить числа между инструментами.

Чем HSB отличается от HSL?

HSB и HSL легко перепутать: обе начинаются с тона и насыщенности и обе читаются гораздо понятнее, чем RGB. Разница в третьем канале:

• HSB использует яркость, привязанную к максимальному значению канала в модели.
• HSL использует светлоту (lightness) — более симметричное положение между чёрным и белым.

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

Как выбирать:

• Берите HSB или HSV, когда нужен удобный подбор цвета: быстро найти и подкрутить оттенок.
• Берите HSL, когда пишете значения hsl() в CSS или делаете простые вариации светлоты в стилях.
• Берите OKLCH, когда нужно рассуждать о светлоте, насыщенности и тоне ближе к человеческому восприятию.

Частая ошибка — считать яркость HSB и светлоту HSL взаимозаменяемыми. Это не так. Два цвета могут выглядеть похоже при заметно разных значениях третьего канала, и совпадение только по нему не гарантирует одинаковую воспринимаемую светлоту.

HSB, RGB и HEX: что когда использовать

HSB, RGB и HEX — это разные способы описать один и тот же цвет, а не конкурирующие подходы.

RGB описывает цвет каналами красного, зелёного и синего. Он нужен для экранов, Canvas, обработки изображений и вычислений цвета в JavaScript. HEX — компактная шестнадцатеричная запись того же RGB, вроде #4F8CFF; он преобладает в CSS, дизайн-спецификациях и брендбуках. HSB лучше подходит для выбора, настройки и изучения цвета, потому что даёт прямой контроль над тоном, насыщенностью и яркостью.

Типичный рабочий процесс для веба: подобрать цвет визуально в HSB или HSL, а затем скопировать результат как HEX, RGB, CSS-переменные или JSON для самого проекта.

Как настраивать цвет через HSB

Рабочий порядок действий:

1. Сначала тон: выберите семейство цвета — оранжевый, синий, зелёный.
2. Затем насыщенность: решите, цвет сочный, приглушённый, сероватый или почти чистый.
3. Яркость в последнюю очередь: решите, он светлый, средний или тёмный.

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

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

Потренируйте HSB в Palette Lab

Откройте игру на угадывание цветов мультгероев, если хотите тренировать цветовую память на знакомых персонажах, или игру с цветом для чистой тренировки восприятия. Потом загляните в экстрактор палитры цветов, чтобы превратить изображение в переиспользуемые HEX, RGB, HSB, OKLCH, CSS-переменные и JSON.

Вместе игра и инструмент делают HSB куда менее абстрактным: вы угадываете цвет, сравниваете его с исходным, вытаскиваете настоящие палитры и продолжаете тренироваться.

Конкретнее:

• Используйте игры, чтобы отрабатывать сборку пропавшего цвета ползунками тона, насыщенности и яркости.
• Используйте экстрактор палитры, чтобы разбирать цвета реальных изображений и сравнивать их значения в HEX, RGB, HSB и OKLCH.
• Копируйте извлечённые цвета как CSS-переменные или JSON для сайтов, прототипов, дизайн-систем и браузерных игр.

Вопросы и ответы про HSB

Можно ли использовать HSB прямо в CSS?

В CSS обычно применяют HEX, RGB, HSL, OKLCH и связанные цветовые функции. Сама запись HSB не является самой распространённой нативной нотацией, но модель по-прежнему очень полезна для подбора и понимания цвета. Вы можете выбрать цвет в HSB, а затем перевести его в HEX, RGB, HSL или OKLCH для стилей.

Яркость в HSB — это то же самое, что воспринимаемая яркость?

Не совсем. Яркость в HSB — это канал модели, а не полноценная мера того, насколько светлым цвет кажется человеческому зрению. Разные тона при одинаковой яркости выглядят по-разному светлыми. Для читаемости, контраста и доступности не полагайтесь только на яркость HSB.

Почему два похожих значения HSB могут выглядеть по-разному?

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

Зачем изучать HSB дизайнеру или художнику?

Потому что HSB помогает быстро ставить диагноз. Вместо «этот цвет какой-то не такой» вы можете сказать конкретно: тон ушёл, насыщенность завышена или яркость занижена. Это выручает в интерфейсном дизайне, иллюстрации, фирменных палитрах и в тренировке цвета на Palette Lab.