Настройка цвета HSV (оттенок, насыщенность, значение) — это цилиндрическая цветовая модель, которая описывает цвета с точки зрения оттенка, насыщенности и значения. Это альтернатива более известной аддитивной цветовой модели RGB (красный, зеленый, синий). В HSV цвета определяются по оттенку (типу цвета, например, красный, синий или желтый), насыщенности (интенсивности или чистоте цвета) и значению (яркости или светлоте цвета). Модель HSV позволяет интуитивно выбирать цвет, поскольку эти три свойства напоминают то, как люди воспринимают цвет.
Цветовое пространство HSV можно визуализировать в виде цилиндра. Центральная вертикальная ось представляет собой диапазон значений от черного (внизу) до белого (вверху). Угол вокруг центральной оси соответствует оттенку: красный — 0°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240° и пурпурный — 300°. Расстояние от центральной оси представляет собой насыщенность, при этом цвета становятся менее насыщенными по мере приближения к оси.
| Компонента HSV | Диапазон | Описание |
|---|---|---|
| Оттенок (H) | 0° до 360° | Тип цвета в диапазоне от красного при 0°, желтого при 60°, зеленого при 120°, голубого при 180°, синего при 240° и пурпурного при 300°. |
| Насыщенность (S) | 0% до 100% | Интенсивность или чистота цвета в диапазоне от ненасыщенного при 0% до полностью насыщенного при 100%. |
| Значение (V) | 0% до 100% | Яркость или светлота цвета в диапазоне от черного при 0% до белого при 100%. |
Для любого заданного оттенка и насыщенности уменьшение значения приводит к более темному цвету, а увеличение значения приводит к более светлому цвету. Уменьшение насыщенности делает цвет более тусклым или сероватым. Крайние точки цилиндра — черный (внизу), белый (вверху), полностью насыщенные цвета (поверхность цилиндра) и ненасыщенные серые тона (центральная ось).
Использование цветовой модели HSV имеет несколько преимуществ по сравнению с RGB:
По этим причинам HSV может обеспечить более удобный способ выбора, управления и работы с цветами во многих приложениях.
Выбор цвета HSV позволяет пользователям выбирать цвета в графическом цилиндре или треугольнике HSV. Некоторые ключевые особенности палитр цветов HSV включают:
Вот пример палитры цветов HSV:
| Эта палитра цветов позволяет пользователю выбирать оттенок с помощью вертикального ползунка справа. Насыщенность можно регулировать с помощью верхнего горизонтального ползунка, в то время как нижний ползунок управляет значением/яркостью. Выбранный цвет HSV предварительно просматривается в большом поле, а его шестнадцатеричное значение RGB отображается ниже. Сохраненные пользовательские цвета отображаются в виде образцов внизу. |
Графические селекторы HSV обеспечивают интуитивно понятный способ выбора цветов по сравнению с вводом числовых значений HSV или RGB. Возможность визуальной настройки оттенка, насыщенности и яркости значительно упрощает тонкую настройку цвета.
Цветовой круг HSV — еще один полезный инструмент для визуализации и выбора цветов. Он предоставляет обзор полного диапазона оттенков в круговом формате.
Типичное цветовое колесо HSV содержит:
Вот пример цветового колеса HSV:
| Это цветовое колесо показывает диапазон оттенков вокруг круга от красного (0°) до пурпурного (300°). Насыщенность увеличивается к краю, а в центре в основном ненасыщенные белые, серые и черные цвета. Яркость можно регулировать, добавляя белый или черный. |
Цветовой круг HSV полезен для:
Вместе с ползунками HSV цветовой круг HSV обеспечивает гибкость для перехода между точным выбором цвета и обзором всего цветового пространства.
В коде цвета HSV можно определять с помощью различных цветовых моделей и синтаксисов:
Например, чтобы задать цвет в CSS с помощью HSL:
.element { background-color: hsl(120, 60%, 70%); /* Зеленый */ } Или с помощью шестнадцатеричного RGB с яркостью 50%:
const red = '#FF0000'; // Оттенок 0°, насыщенность 100% function lighten(color, amount) { const rgb = hexToRgb(color); rgb.blue = Math.round(100 * amount); rgb.green = Math.round(100 * amount); rgb.red = Math.round(100 * amount); return rgbToHex(rgb); } const lightRed = lighten(red, 0.5); // '#FF7F7F' В большинстве языков программирования есть библиотеки цветов или утилиты, которые поддерживают создание, преобразование и обработку цветов HSV.
Хотя концептуальный цилиндр HSV полезен, в его реализации есть некоторые особенности, которые могут исказить однородность цветового пространства:
Другие цилиндрические модели, такие как HSI (оттенок, насыщенность, интенсивность) и HSL (оттенок, насыщенность, яркость) решают некоторые из этих проблем и могут иметь более точное с точки зрения восприятия представление.
Несмотря на некоторые искажения, HSV остается популярным из-за логического разделения оттенка, насыщенности и значения. Тщательное проектирование и тестирование в различных цветовых диапазонах может минимизировать неравномерность восприятия во многих случаях.
Преобразование между цветовыми моделями HSV и RGB выполняется просто с использованием простых математических формул. Вот преобразования в каждом направлении:
R = HSV в RGB(H,S,V) C = S * VX = C * (1 - |(H/60°) mod 2 - 1|) m = V - C если H находится между 0° и 60° R = C, G = X, B = 0 иначе, если H находится между 60° и 120° R = X, G = C, B = 0 иначе, если H находится между 120° и 180° R = 0, G = C, B = X иначе, если H находится между 180° и 240° R = 0, G = X, B = C иначе, если H находится между 240° и 300° R = X, G = 0, B = C иначе /* H находится между 300° и 360° */ R = C, G = 0, B = X (R,G,B) = ((R+m),(G+m),(B+m))
HSV = RGB в HSV(R,G,B) Cmax = max(R,G,B) Cmin = min(R,G,B) ? = Cmax - Cmin H = не определено, если ? == 0 H = 0, иначе, если Cmax == RH = 60° * ((GB)/? mod 6) иначе, если Cmax == GH = 60° * ((BR)/? + 2) иначе /* Cmax == B */ H = 60° * ((RG)/? + 4) если Cmax == 0 S = 0 иначе S = ?/Cmax V = Cmax
Эти формулы напрямую преобразуют каждый компонент HSV в эквивалент в цветовом пространстве RGB и наоборот. Большинство языков программирования предоставляют функции преобразования HSV/RGB в своих стандартных библиотеках.
Некоторые распространенные применения и применения цветовой модели HSV включают:
В целом, перцептивная основа HSV делает его универсальным инструментом для создания, манипулирования и понимания цвета во многих областях.
Цилиндрическая цветовая модель HSV описывает цвета с точки зрения оттенка, насыщенности и значения. Это соответствует восприятию цвета человеком и позволяет интуитивно выбирать цвет по сравнению с RGB. HSV обеспечивает более простую настройку и преобразование цвета в таких приложениях, как редактирование изображений, визуализация данных и дизайн. Несмотря на некоторые искажения в реализации, HSV остается популярным благодаря своему логическому разделению свойств цвета. Палитры цветов, круги и формулы HSV делают работу с цветом более доступной независимо от используемого языка программирования или программного обеспечения. Как для художников, так и для ученых HSV предоставляет мощную структуру для использования бесконечных возможностей цвета.