HSV (цветовая модель)

HSV (англ. Hue, Saturation, Value — тон, насыщенность, значение) или HSB (англ. Hue, Saturation, Brightness — оттенок, насыщенность, яркость) — цветовая модель, в которой координатами цвета являются:

Шкала оттенков — Hue

• Hue — цветовой тон, (например, красный, зелёный или сине-голубой). Варьируется в пределах 0—360°, однако иногда приводится к диапазону 0—100 или 0—1.
• Saturation — насыщенность. Варьируется в пределах 0—100 или 0—1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
• Value (значение цвета) или Brightness — яркость. Также задаётся в пределах 0—100 и 0—1.

Модель была создана Элви Реем Смитом, одним из основателей Pixar, в 1978 году. Она является нелинейным преобразованием модели RGB.

Цвет, представленный в HSV, зависит от устройства, на которое он будет выведен, так как HSV — преобразование модели RGB, которая тоже зависит от устройства. Для получения кода цвета, не зависящего от устройства, используется модель Lab.

Следует отметить, что HSV (HSB) и HSL — две разные цветовые модели.

Трёхмерные визуализации пространства HSV

Цилиндр

Цилиндр

Простейший способ отобразить HSV в трёхмерное пространство — воспользоваться цилиндрической системой координат. Здесь координата H определяется полярным углом, S — радиус-вектором, а V — Z-координатой. То есть, оттенок изменяется при движении вдоль окружности цилиндра, насыщенность — вдоль радиуса, а яркость — вдоль высоты. Несмотря на «математическую» точность, у такой модели есть существенный недостаток: на практике количество различимых глазом уровней насыщенности и оттенков уменьшается при приближении яркости (V) к нулю (то есть, на оттенках, близких к чёрному). Также на малых S и V появляются существенные ошибки округления при переводе RGB в HSV и наоборот. Поэтому чаще применяется коническая модель.

Конус

Коническое представление модели

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

Оба этих способа являются удобной трёхмерной иллюстрацией пространства HSV. Но из-за трёхмерности они в прикладном ПО не применяются.

Визуализация HSV в прикладном ПО

Модель HSV часто используется в программах компьютерной графики, так как удобна для человека. Ниже указаны способы «разворачивания» трёхмерного пространства HSV на двухмерный экран компьютера.

Цветовой круг

Цветовой круг в прикладном ПО

Эта визуализация состоит из цветового круга (то есть, поперечного сечения цилиндра) и движка яркости (высоты цилиндра). Эта визуализация получила широкую известность по первым версиям ПО компании Corel. На данный момент применяется чрезвычайно редко, чаще используют кольцевую модель («а-ля Macromedia»)

Цветовое кольцо

Цветовое кольцо с осями H, S и V

Поворачивающееся кольцо

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

Изменение одного компонента

Три уровня яркости при увеличивающейся насыщенности

Три уровня насыщенности при увеличивающейся яркости

На этих двух диаграммах показываются цвета, различающиеся только одним компонентом.

Матрица соседних оттенков

3×3×3

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

HSV и восприятие цвета

Изображение и его отдельные компоненты — H, S, V. На разных участках изображения можно проследить изменения компонент

Часто художники предпочитают использовать HSV вместо других моделей, таких как RGB и CMYK, потому что они считают, что устройство HSV ближе к человеческому восприятию цветов. RGB и CMYK определяют цвет как комбинацию основных цветов (красного, зелёного и синего или жёлтого, розового, голубого и чёрного соответственно), в то время как компоненты цвета в HSV отображают информацию о цвете в более привычной человеку форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный? Цветовое пространство HSL представляет цвет похожим и даже, возможно, более интуитивно понятным образом, чем HSV.

Преобразования цветовых компонентов между моделями

RGB → HSV

Иллюстрация, демонстрирующая отношение между RGB и HSV

Считаем, что: $$\begin{align} H & \in \left[ 0, 360 \right) \\ S,V,R,G,B & \in \left[ 0, 1 \right] \end{align}$$

Пусть $MAX$ — максимальное значение из $R$, $G$ и $B$, а $MIN$ — минимальное из них.

$H = \begin{cases} \\ \\ \\ \\ \\ \\ \\ \\ \end{cases}$	$0,$ если $MAX = MIN$
	$60 \times \frac{G - B}{MAX - MIN} + 0,$ если $MAX = R~$ и $G \ge B$
	$60 \times \frac{G - B}{MAX - MIN} + 360,$ если $MAX = R~$ и $G < B$
	$60 \times \frac{B - R}{MAX - MIN} + 120,$ если $MAX = G$
	$60 \times \frac{R - G}{MAX - MIN} + 240,$ если $MAX = B$

$S = \begin{cases} \\ \\ \end{cases}$	$0,$ если $MAX = 0,$
	иначе $1 - \frac {MIN} {MAX}$

$V = MAX \,$

HSV → RGB

$H_i =$	$\left\lfloor { H \over 60 } \right\rfloor\mod 6$
$f =$	${ H \over 60 } - \left\lfloor { H \over 60 } \right\rfloor$
$p =$	$V ( 1 - S ) \,$
$q =$	$V ( 1 - f S ) \,$
$t =$	$V ( 1 - ( 1 - f ) S ) \,$

если $H_i = 0 \rightarrow$	$R = V,$	$G = t,$	$B = p$
если $H_i = 1 \rightarrow$	$R = q,$	$G = V,$	$B = p$
если $H_i = 2 \rightarrow$	$R = p,$	$G = V,$	$B = t$
если $H_i = 3 \rightarrow$	$R = p,$	$G = q,$	$B = V$
если $H_i = 4 \rightarrow$	$R = t,$	$G = p,$	$B = V$
если $H_i = 5 \rightarrow$	$R = V,$	$G = p,$	$B = q$

В компьютерной графике компоненты S и V принято представлять целым числом от 0 до 255 (в окне выбора цветов в Microsoft Windows — от 0 до 240) вместо вещественного от 0 до 1. При целочисленном кодировании для каждого цвета в HSV есть соответствующий цвет в RGB. Однако обратное утверждение не является верным: некоторые цвета в RGB нельзя выразить в HSV так, чтобы значение каждого компонента было целым. Фактически, при таком кодировании доступна только $\frac{1}{256}$ часть цветового пространства RGB.

Комплементарные цвета

Два цвета называются комплементарными, если при смешивании их в равной пропорции получается чистый серый цвет. Если задан один цвет ($H$, $S$, $V$), то обязательно существует комплементарный ему цвет ($H'$, $S'$, $V'$). Поскольку результирующий цвет должен быть серым, его насыщенность (S) должна быть равна 0. Таким образом,

$H^\prime =$	$\begin{cases}H - 180, & \mbox{if } H \ge 180 \\H + 180, & \mbox{if } H < 180 \end{cases}$
$S^\prime =$	${VS \over V(S - 1) + 1}$
$V^\prime =$	$V(S - 1) + 1$

См. также

• HSL (цветовая модель)
• RGB (цветовая модель)
• Цветовое пространство

Образцы цветовых моделей

При помощи подвода «мыши» к образчикам таблицы цветов и в случае действующих ниже образчиков, можно видеть значения R, G и B, которые заложены в каждом из них в «tooltip».

HSV

• Таблицы цветов HSV:

H = 180° (Cyan) H = 0° (Red) V \ S 1 ¾ ½ ¼ 0 ¼ ½ ¾ 1 1                   ⅞                   ¾                   ⅝                   ½                   ⅜                   ¼                   ⅛                   0	H = 210° (Blue-Cyan) H = 30° (Yellow-Red) V \ S 1 ¾ ½ ¼ 0 ¼ ½ ¾ 1 1                   ⅞                   ¾                   ⅝                   ½                   ⅜                   ¼                   ⅛                   0
H = 240° (Blue) H = 60° (Yellow) V \ S 1 ¾ ½ ¼ 0 ¼ ½ ¾ 1 1                   ⅞                   ¾                   ⅝                   ½                   ⅜                   ¼                   ⅛                   0	H = 270° (Magenta-Blue) H = 90° (Green-Yellow) V \ S 1 ¾ ½ ¼ 0 ¼ ½ ¾ 1 1                   ⅞                   ¾                   ⅝                   ½                   ⅜                   ¼                   ⅛                   0
H = 300° (Magenta) H = 120° (Green) V \ S 1 ¾ ½ ¼ 0 ¼ ½ ¾ 1 1                   ⅞                   ¾                   ⅝                   ½                   ⅜                   ¼                   ⅛                   0	H = 330° (Red-Magenta) H = 150° (Cyan-Green) V \ S 1 ¾ ½ ¼ 0 ¼ ½ ¾ 1 1                   ⅞                   ¾                   ⅝                   ½                   ⅜                   ¼                   ⅛                   0