Результат
Все вычисления выполняются локально в браузере: разбор, график, экспорт. Если отключите сеть, страница продолжит работать.
Факты и границы применимости
| Диапазон тона | От 0° до 360° |
|---|---|
| Диапазон насыщенности и яркости | От 0% до 100% |
| Формула яркости | V = max(R, G, B) / 255 |
| Формула насыщенности | S = (max − min) / max, при max = 0 → S = 0 |
Когда этот метод вводит в заблуждение
- HSV — не единственная цилиндрическая модель: не путайте её с похожей, но иной моделью HSL (тон и там, и там задаётся одинаково, но насыщенность и яркость считаются по-разному).
- При очень тёмных цветах (яркость близка к 0%) тон и насыщенность становятся малозначимыми — визуально разные значения тона могут выглядеть как один и тот же почти чёрный цвет.
- При нулевой насыщенности (оттенки серого, включая чёрный и белый) тон математически не определён — конвертер в этом случае показывает 0°.
- Результат — это просто другая система координат для того же цвета, а не другое цветовое пространство: он не содержит информации о цветовом профиле экрана.
Как это считается
Значения R, G и B нормализуются делением на 255, чтобы получить числа от 0 до 1.
Яркость (V) — это максимум из нормализованных R, G, B.
Насыщенность (S) вычисляется как отношение разницы между максимумом и минимумом каналов к максимуму (при максимуме, равном нулю, насыщенность считается нулевой).
Тон (H) вычисляется по тому, какой из каналов R, G или B оказался максимальным, с помощью кусочной формулы, дающей значение от 0° до 360°.
Вопросы и ответы
Чем HSV отличается от HSL?
В обеих моделях тон задаётся одинаково, но насыщенность и яркость/светлота вычисляются по разным формулам, поэтому одинаковые проценты S и L (или V) в HSL и HSV дают разные цвета.
Почему при S=0% показывается тон 0°, хотя цвет серый?
Тон математически не определён для оттенков серого, поэтому по соглашению используется значение 0° — на восприятие серого цвета это никак не влияет.
Можно ли использовать HSV в CSS напрямую?
Современный CSS не поддерживает функцию hsv() напрямую — для использования в стилях удобнее перевести результат в HSL или HEX/RGB отдельным конвертером.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.