Коротко
- Цветовой тон — положение цвета на круге, угол от 0° до 360°: красный в 0°, зелёный около 120°, синий около 240°, и снова красный.
- Насыщенность — сколько этого тона присутствует, от 0 процентов (серый) до 100 процентов (чистый цвет). Яркость — насколько цвет светлый, от 0 процентов (чёрный) до 100 процентов.
- Поскольку тон — круг, дальше всего два тона могут быть друг от друга на 180° — на противоположных сторонах круга. Любая ошибка больше этой на самом деле меньше, если считать в другую сторону.
- HSB нужна, чтобы выбирать и описывать цвета на глаз; RGB — то, как цвета создают экраны; Lab — для измерения, насколько различаются два цвета на вид. Они отвечают на разные вопросы.
- Сборка цвета тремя отдельными ползунками показывает, какое из трёх суждений дало сбой. Выбор из образцов этого не показывает.
Три числа, три вопроса
Возьми цвет — скажем, приглушённый бирюзовый. Если попросить его описать, ты не станешь называть, сколько в нём красного, зелёного и синего света, хотя именно это делает экран. Ты скажешь, что это сине-зелёный, не очень сильный, довольно тёмный. Это и есть HSB: цветовой тон, насыщенность, яркость, в том порядке, в каком человек действительно думает. Модель предложил Элви Рэй Смит в конце 1970-х именно для того, чтобы люди могли выбирать цвета так, как они их видят. Её также называют HSV, где V — value; это одна и та же модель.
| Измерение | Вопрос, на который оно отвечает | Диапазон | Края |
|---|---|---|---|
| Цветовой тон | Какой это цвет? | 0°–360° | Красный в 0°, затем жёлтый, зелёный, голубой, синий, пурпурный и снова красный |
| Насыщенность | Сколько в нём этого цвета? | 0–100% | 0% — серый без всякого тона; 100% — самая чистая версия тона |
| Яркость | Насколько он светлый? | 0–100% | 0% — чёрный независимо от двух других; 100% — настолько светлый, насколько может быть этот тон |
Цветовой тон — это угол, и это важно
Цветовой тон расположен на круге, потому что спектр, который идёт от красного к фиолетовому по линии, замыкается через пурпурные оттенки, которых нет в радуге: пурпурный лежит между фиолетовым и красным и замыкает петлю. Поэтому тон измеряется углом. Красный — 0°, жёлтый около 60°, зелёный около 120°, голубой около 180°, синий около 240°, пурпурный около 300°, а 360° — снова красный.
У круга есть следствие, которого нет у линии: существует наибольшее возможное расстояние, и это половина оборота. Два тона никогда не могут быть дальше друг от друга, чем на 180°. Догадка 350° при цели 10° — это не ошибка в 340°; это ошибка в 20° через верх круга. Любая честная оценка тона должна измерять по короткому пути, а наихудшая возможная ошибка по тону — это дополнительный цвет, тон прямо напротив. Поэтому Percore нормирует ошибку тона на 180°: это расстояние от идеального до настолько неверного, насколько возможно.
Насыщенность и яркость
Насыщенность — это количество тона в цвете. При нулевой насыщенности любой тон превращается в один и тот же серый, поэтому тон очень бледного или очень пыльного цвета действительно трудно назвать — в нём почти нет тона, который можно увидеть. При полной насыщенности цвет настолько яркий, насколько позволяет тон. Яркость — просто то, насколько цвет светлый; при нулевой яркости всё чёрное, что бы ни говорили тон и насыщенность.
Эти два измерения взаимодействуют так, что людей это сбивает. Тёмный насыщенный красный и светлый ненасыщенный красный могут казаться совершенно разными цветами, хотя тон у них общий. На практике люди, вспоминая цвет, обычно примерно верно называют тон и завышают насыщенность — запомненный цвет ярче настоящего, — а ошибки яркости идут в обе стороны в зависимости от окружающего света. Именно эти закономерности стоит искать в результате по измерениям.
HSB рядом с другими моделями
HSB — один из нескольких способов описать один и тот же цвет, и у каждого есть причина существовать. Выбор неверной модели для задачи — частый источник путаницы, поэтому вот для чего нужна каждая.
| Модель | Что это | Лучше всего для |
|---|---|---|
| HSB / HSV | Тон как угол, насыщенность и яркость в процентах. Яркость 100% — самая чистая и светлая версия тона. | Выбор и описание цветов на глаз; пипетки цвета; диагностика ошибки памяти на цвет |
| HSL | Тот же тон; светлота вместо яркости, при этом светлота 100% — всегда белый, а 50% — чистый тон. | CSS и веб-дизайн, где осветление цвета к белому — частая операция |
| RGB | Сколько красного, зелёного и синего света, каждый 0–255. То, что физически делает экран. | Код, форматы файлов, всё, что должно отображаться на устройстве; трудно рассуждать на глаз |
| CIELAB (Lab) | Светлота плюс две оппонентные оси (зелёный–красный, синий–жёлтый), построенные так, чтобы равные расстояния выглядели одинаково различными. | Измерение различия между двумя цветами (Delta E); печать и работа по управлению цветом |
Полезный способ это удержать: RGB — для машины, HSB и HSL — для человека, а Lab — для измерения. Инструменты восприятия цвета, оценивающие по Delta E, измеряют в Lab; те, что дают три ползунка, позволяют отвечать в HSB. Оба подхода законны, и они говорят разное.
Почему три ползунка говорят больше, чем образец
Если тебе показывают цвет, он исчезает, а ты выбираешь ближайший из шести образцов, результат — один бит информации: верно или неверно, с расстоянием. Если же ты собираешь цвет тремя отдельными органами управления, результат — три числа: насколько ты ошибся по тону, по насыщенности, по яркости, — и эти три числа и есть диагноз. Тот, у кого ошибка по тону мала, а ошибка по насыщенности каждый день велика, узнал что-то о том, как он видит, и может это поправлять.
На этом рассуждении построена сессия «Цвет» в Percore: она заполняет экран цветом, скрывает его и просит вернуть ползунками цветового тона, насыщенности и яркости. Каждая ошибка нормируется — тон на 180°, две другие на их полный диапазон — и три усредняются в точность от 0 до 100; разбивка показывается рядом. Полная формула приведена в статье Как Percore считает результат, а как улучшить восприятие цвета превращает разбивку в практику.
Собери цвет тремя ползунками.
Загрузите в App StoreЧастые вопросы
HSB и HSV — это одно и то же?
Да. V означает value, B — brightness, и обе буквы относятся к одной модели. В разном программном обеспечении используются разные названия; в инструментах Apple и Adobe говорят HSB, во многих других — HSV.
Чем HSB отличается от HSL?
У них общий тон. В HSB яркость 100 процентов — самая чистая и светлая версия тона; в HSL светлота 100 процентов — белый, а чистый тон находится на 50 процентах. HSL распространена в CSS, HSB — в инструментах дизайна.
Почему красный находится в 0° на круге тонов?
По соглашению. Круг должен с чего-то начинаться, и красный выбрали, когда определяли модель; порядок красный, жёлтый, зелёный, голубой, синий, пурпурный следует спектру, а пурпурный замыкает петлю.
Какая наибольшая возможная ошибка по тону?
180°, тон прямо напротив на круге — дополнительный цвет. Любая кажущаяся ошибка больше этой на самом деле меньше, если мерить в другую сторону, поэтому ошибку по тону всегда надо брать по короткому пути.
В чём из трёх люди ошибаются чаще всего?
На практике — в насыщенности: люди склонны помнить цвет более ярким, чем он был. Тон часто близок, а яркость сильно зависит от окружающего света. Результат по измерениям показывает твою собственную закономерность.